vuejs: Ich versuche, die Eingabe mit der v-el-Direktive zu fokussieren

Question

Ich erstelle ein Wizard-Login-Formular, in dem die Handynummer zuerst eingegeben wird und als nächstes Passwort eingegeben wird.

Hier bin versucht, das Passwort-Eingabe

this.$$.passwordInput.focus() 

jedoch mit zu konzentrieren, wenn ich immer die unten angegebenen Fehler

Uncaught TypeError: Cannot read property 'focus' of undefined 

Der vollständige Code ist unten

index.html

<div id="login"> 
    <div v-if="flow.mobile"> 
    <form v-on="submit: checkmobile"> 
     <p> 
      Mobile Number<br> 
      <input type="text" v-model="mobile_number" v-el="mobileNumber"> 
     </p> 
    </form> 
    </div> 
    <div v-if="flow.password"> 
    <form v-on="submit: checkpassword"> 
     <p> 
      Password<br> 
      <input type="password" v-model="password" v-el="passwordInput"> 
     </p> 
    </form> 
    </div> 

script.js

var demo = new Vue({ 
el: '#login', 
data: { 
    flow: { 
     mobile: true, 
     password: false 
    } 
}, 
methods: { 
    checkmobile: function(e) { 
     e.preventDefault(); 
     this.flow.mobile = false; 
     this.flow.password = true; 
     this.$$.passwordInput.focus(); 
    }, 
    checkpassword: function(e) { 
     e.preventDefault(); 
    } 
} 

});

Answer 1

Ihr passwordInput befindet sich in einem v-if-Block, der nur gerendert wird, wenn Sie flow.password auf true setzen; Vue verwendet jedoch asynchrones Rendern, sodass der v-if-Block nicht sofort gerendert wird. Sie können Vue.nextTick verwenden, zu warten, bis es funktioniert:

this.flow.password = true; 
var self = this; 
Vue.nextTick(function() { 
    self.$$.passwordInput.focus(); 
}); 

Lesen Sie den Leitfaden über async, um weitere Informationen zu machen: http://vuejs.org/guide/best-practices.html#Understanding_Async_Updates

Answer 2

Glad dies für einige von euch gearbeitet. Ich habe keine Ahnung warum, aber nachdem ich jede erdenkliche Variation der akzeptierten Antwort versucht habe, konnte ich die Eigenschaft $$. Ref bei Verwendung von v-repeat nicht erhalten. Ich konnte nur Zugriff auf die neu geschaffenen dom Elemente wie so:

new Vue({ 
el: '#reporting_create', 
data: { 
    recipients: { 
     0: { 
      fname: null, 
      lname: null, 
      email: null, 
      registration: false, 
      report: false 
     } 
    }, 
    curRec:1 
}, 
methods: { 
    addRecipient: function(){ 
     event.preventDefault(); 
     this.recipients.$add(
      this.curRec, 
      { 
       fname: null, 
       lname: null, 
       email: null, 
       registration: false, 
       report: false 
      } 
     ); 
     var num = this.curRec; 
     this.$nextTick(function() { 
      console.log(this._children[num].$$.rowrec); 
      newSwitches.find('.switch').bootstrapSwitch(); 
     }) 

     this.curRec++; 
    } 
}}) 

html:

<template v-repeat="recipients"> 
     <div class="row" v-el="rowrec"> 
      <div>{{$key}}</div> 
     </div> 
</template> 

Die addRecipients Funktion außerhalb der v-repeat so auch die vorgeschlagene Antwort here konnte nicht helfen, habe gerufen wurde

Nicht sicher, ob es ein Problem gibt, es auf diese Weise zu tun, aber es funktioniert und ich bin müde.

Answer 3

Vue.js 1 funktioniert ein bisschen anders.

Beispiel:

<textarea v-el:model_message></textarea> 

JS:

this.$els.model_message.focus(); 

Answer 4

Wenn Sie mit vuejs 2, sollten Sie dies lesen:

https://vuejs.org/v2/guide/migration.html#v-el-and-v-ref-replaced

-

In diesem Fall in der Vorlage:

Verwendung ref="passwordInput" statt v-el="passwordInput"

und in Ihrer Methode:

this.$refs.passwordInput.focus() 

Ich hoffe, dass diese Ihnen helfen!

Answer 5

Wenn Sie mit Vue.js 2.0, sollten Sie Folgendes tun:

<input type="text" v-model="currentItem.name" ref="txtName"> 

So können Sie diese Eingabe zugreifen, indem sie die $ Refs mit Objekt:

this.$refs.txtName.focus(); 

Ich hoffe, es hilft .

Answer 6

In Vue.js 2.x können Sie Ihre eigene Richtlinie erstellen automatisch ein Feld zu konzentrieren:

<input v-focus> 

Arbeits:

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

Dazu v-focus Attribut auf Eingaben und andere Elemente verwenden können Beispiel: https://jsfiddle.net/LukaszWiktor/cap43pdn/