vuejs: Versuchen zu konzentrieren, die Eingabe mit v-el-Richtlinie

Erstelle ich ein login-Formular-Assistenten, wo Sie die Handy-Nummer wird zuerst eingegeben und
Passwort eingegeben, weiter.

Hier bin versuchen zu konzentrieren, die Passwort-Eingabe mit

this.$$.passwordInput.focus()

aber wenn bin immer der Fehler unten angegebenen

Uncaught TypeError: Cannot read property 'focus' of undefined

Den vollständigen code 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();
    }
}

});

InformationsquelleAutor Anish Dcruz | 2015-06-16

vue.js

39

Ihre passwordInput in einem v-block, welcher nur gerendert wird wenn Sie flow.password zu wahren; Jedoch Vue verwendet asynchrone rendering, also die v-if-block wird nicht sofort gerendert. Sie können Vue.nextTick zu warten, bis es funktioniert:
```
this.flow.password = true;
var self = this;
Vue.nextTick(function () {
  self.$$.passwordInput.focus();
});
```
Lesen Sie die Anleitung über asynchrone rendering für mehr details: http://vuejs.org/guide/best-practices.html#Understanding_Async_Updates

Danke!!! Es funktionierte
Ich werde nur hinzufügen, dass diese, wenn Sie auf Ihr el dies innerhalb einer anderen Methode, die Vue.nextTick Leben im inneren, die Methode. Das war nicht ganz klar.

InformationsquelleAutor Evan You
10

Wenn Sie vuejs 2, sollten Sie dies Lesen:

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

--

In diesem Fall, in Ihre Vorlage ein:

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

und in Ihrer Methode:
```
this.$refs.passwordInput.focus()
```
Ich hoffe, dies hilft Ihnen!

Ich: Uncaught TypeError: Cannot read property 'passwordInput' of undefined

InformationsquelleAutor Sebastián Lara
7

In Vue.js 2.x Sie können erstellen Sie Ihre eigene Richtlinie zu konzentrieren, ein Feld automatisch:
```
Vue.directive('focus', {
    inserted: function (el) {
        el.focus();
    },
    update: function (el) {
        Vue.nextTick(function() {
              el.focus();
        })
    }
})
```
Dann können Sie v-focus Attribut Eingänge und andere Elemente:
```
<input v-focus>
```
Beispiel: https://jsfiddle.net/LukaszWiktor/cap43pdn/

Dies ist die einzige Lösung, die gearbeitet für meine input-Felder in einer v-loop.
Ich hatte zum ändern dieser Lösung um das update zu entfernen: Teil. Ich hatte zwei Felder Benutzername und Kennwort ein, und markiert den Benutzernamen mit v-focus. Wenn das Passwort einzugeben, geht es dann zurück zu wechseln, Benutzername, mit jedem Charakter. Ich kann mir vorstellen, dass vielleicht durch das entfernen der update-Funktion, ich werde Sie vermissen heraus auf manche Ereignisse für das auslösen der Fokus auf dem Benutzernamen, aber bisher noch nicht in Lauf.
Eine präzise und funktionierende Antwort mit fiddle, würde ich Sie 2-up-Stimmen, wenn ich könnte. Danke.
Beispiel dokumentiert unter dieser Seite.

InformationsquelleAutor Lukasz Wiktor

Froh, dass es dieses war für einige von Euch.
Ich habe keine Ahnung warum, aber nach dem Versuch, jede denkbare variation der akzeptierten Antwort, die ich konnte nicht Holen Sie sich die $$.ref-Eigenschaft bei der Verwendung von v-wiederholen.
Ich konnte nur Zugriff auf die neu erstellte dom-Elementen an, etwa 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>

Den addRecipients-Funktion aufgerufen wurde, die außerhalb der v-wiederholt, so dass auch die vorgeschlagene Antwort hier Tat, konnte nicht helfen,

Nicht sicher, ob es ein Problem mit dieser Methode, aber es funktioniert und ich bin müde.

InformationsquelleAutor Roark

Vue.js 1 arbeitet ein bisschen anders.

Beispiel:

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

JS:

this.$els.model_message.focus();

InformationsquelleAutor Jamie

0

Wenn Sie mit Vue.js 2.0, sollten Sie das folgende tun:
```
<input type="text" v-model="currentItem.name" ref="txtName">
```
So können Sie diesen Eingang mit dem $refs Objekt:
```
this.$refs.txtName.focus();
```
Ich hoffe, es hilft.

Ich: "Uncaught TypeError: Cannot read property 'txtName' undefined. Diese in der "erstellt" - Methode.

InformationsquelleAutor Joel Rodrigues
0

Vue v2 in der Dokumentation verwendet Fokus als ein Beispiel in schreiben von benutzerdefinierten Richtlinien. Alle benötigten code wird geliefert mit dem Beispiel, https://vuejs.org/v2/guide/custom-directive.html. Du musst dich zuerst registrieren der Richtlinie. Der link zeigt, wie sich registrieren, um Sie lokal auf die Komponente.
```
//Register a global custom directive called `v-focus`
Vue.directive('focus', {
  //When the bound element is inserted into the DOM...
  inserted: function (el) {
    //Focus the element
    el.focus()
  }
})
```
Nachdem dies erledigt ist, können Sie nun mit den Tasten v-Fokus auf ein element:
```
<input v-focus>
```
So gerne.

InformationsquelleAutor Enoch

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.