Đặt tiêu điểm của phần tử đầu vào trong vue.js

Question

Tôi đang cố đặt tiêu điểm của phần tử đầu vào trong Vue.js. Tôi tìm thấy một số trợ giúp trực tuyến nhưng không có lời giải thích nào phù hợp với tôi.

Dưới đây là mã của tôi:

<template> 
    <form method="post" action="" v-on:submit.prevent="search"> 
     <input type="text" placeholder="Person name" required v-model="name" v-el="nameInput" /> 
     <input type="text" placeholder="Company" required v-model="company" v-el="domainInput" /> 
     <input type="submit" value="Search" class="btn show-m" /> 
    </form> 
</template> 

<script> 
export default { 
    data() { 
     return { 
      contacts: [], 
      name: null, 
      company: null 
     } 
    }, 
    ready: { 
     // I tried the following : 
     this.$$.nameInput.focus(); 
     this.$els.nameInput.focus(); 
     // None of them worked ! 
    } 
    methods: { 
     search: function (event) { 
      // ... 

      // I also would like to give the focus here, once the form has been submitted. 
      // And here also, this.$$ and this.$els doesn't work 
     }, 
    } 
} 
</script> 

tôi đã cố gắng this.$$.nameInput.focus(); và this.$els.nameInput.focus(); cho những gì tôi có thể tìm thấy trực tuyến để nhắm mục tiêu trọng tâm, nhưng this.$$ là undefined, và this.$els trống.

Nếu điều đó có thể hữu ích, tôi đang sử dụng vue.js v1.0.15

Cảm ơn sự giúp đỡ của bạn.

Answer 1

Có một số vấn đề.

Đầu tiên hết, v-el s được định nghĩa như thế này:

<input v-el:input-element/> 

Điều đó sẽ lần lượt biến để một camelCase trong các mã. Bạn có thể đọc thêm về chức năng kỳ lạ này here.

Ngoài ra, bạn sẽ có thể truy cập biến thông qua this.$els.inputElement. Tâm trí bạn, nó sẽ chỉ xuất hiện trong thành phần mà bạn đang xác định phần tử đó (hoặc chính ứng dụng chính, nếu bạn định nghĩa nó ở đó).

Thứ hai, tiêu điểm tự động dường như không hoạt động trên Firefox (43.0.4), ít nhất là trên máy của tôi. Mọi thứ hoạt động tốt trên Chrome và tập trung như mong đợi.

Answer 2

Trong vue 2.x bạn có thể giải quyết bằng chỉ thị.

Vue.directive('focus', { 
    inserted: function (el) { 
     el.focus() 
    } 
}) 

Sau đó, bạn có thể sử dụng v-focus thuộc tính trên đầu vào và các yếu tố khác:

<input v-focus>