Einstellen des Fokus eines Eingabeelements in vue.js

Question

Ich versuche, den Fokus eines Eingabeelements in Vue.js zu setzen. Ich fand online Hilfe, aber keine der Erklärungen funktionierte für mich.

Hier ist mein Code:

<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> 

Ich versuchte this.$$.nameInput.focus(); und this.$els.nameInput.focus(); für das, was ich online finden konnten, um den Fokus auf Ziel, aber this.$$ ist nicht definiert, und this.$els ist leer. Wenn

die helfen können, ich bin mit vue.js v1.0.15

Dank für Ihre Hilfe danken.

Answer 1

Es gibt ein paar Probleme.

Erste allem v-el s sind wie folgt definiert:

<input v-el:input-element/> 

Das wird die Variable auf einen Camelcase im Code drehen. Sie können mehr über diese seltsame Funktionalität lesen here.

Ansonsten sollten Sie auf die Variable über this.$els.inputElement zugreifen können. Wohlgemerkt, es wird nur in der Komponente angezeigt, in der Sie dieses Element definieren (oder in der Hauptanwendung selbst, wenn Sie es dort definiert haben).

Zweitens, die automatische Fokussierung scheint nicht auf Firefox (43.0.4) zu arbeiten, zumindest auf meinem Rechner. Alles funktioniert hervorragend in Chrome und konzentriert sich wie erwartet.

Answer 2

In vue 2.x können Sie es mit einer Direktive lösen.

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

Dann können Sie v-focus Attribute auf Eingaben und anderen Elemente verwenden:

<input v-focus>