vuejs: provare a focalizzare l'input usando la direttiva v-el

Question

Sto creando un modulo di login della procedura guidata in cui viene immesso il numero di cellulare per la prima volta e viene immessa la password successiva.

Qui sto cercando di mettere a fuoco l'immissione della password utilizzando

this.$$.passwordInput.focus() 

se ricevo l'errore riportato qui di seguito

Uncaught TypeError: Cannot read property 'focus' of undefined 

Il codice completo è sotto

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

La passwordInput si trova all'interno di un blocco v-if, che viene visualizzato solo quando si imposta flow.password su true; Tuttavia Vue usa il rendering asincrono, quindi il blocco v-if non sarà reso immediatamente. È possibile utilizzare Vue.nextTick aspettare fino a quando lo fa:

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

leggere la guida su asincrona di rendering per maggiori dettagli: http://vuejs.org/guide/best-practices.html#Understanding_Async_Updates

Answer 2

contento questo ha lavorato per alcuni di voi. Non ho idea del perché, ma dopo aver provato ogni variante immaginabile della risposta accettata, non ho potuto ottenere la proprietà $$. Ref quando si utilizzava v-repeat. ho potuto accedere solo gli elementi DOM appena creati in questo modo:

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> 

La funzione AddRecipients è stato chiamato fuori dal v-repeat così anche la risposta suggerita here ha potuto fare a meno

Non sono sicuro se c'è un problema nel farlo in questo modo ma funziona e sono stanco.

Answer 3

Vue.js 1 funziona in modo leggermente diverso.

Esempio:

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

JS:

this.$els.model_message.focus(); 

Answer 4

Se si utilizza vuejs 2, si dovrebbe leggere questo:

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

-

In questo caso, nel modello:

uso ref="passwordInput" invece v-el="passwordInput"

e nel metodo:

this.$refs.passwordInput.focus() 

Spero che questo aiuto!

Answer 5

Se si utilizza Vue.js 2.0, si dovrebbe effettuare le seguenti operazioni:

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

in modo da poter accedere a questo ingresso utilizzando i $ arbitri oggetto:

this.$refs.txtName.focus(); 

Spero che aiuta .

Answer 6

In Vue.js 2.x è possibile creare il proprio direttiva per mettere a fuoco automaticamente un campo:

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

quindi è possibile utilizzare l'attributo v-focus su ingressi e altri elementi:

<input v-focus> 

di lavoro esempio: https://jsfiddle.net/LukaszWiktor/cap43pdn/