Warum bezieht sich meine Vue-Methode nicht auf den richtigen Kontext (Daten)?

Question

Wenn addTodo ausgelöst wird und ich this darin überprüfen, ist der Kontext das Browserfenster, nicht das data Objekt. So endet todos undefined.

Irgendeine Idee, was ich vermisse?

HTML:

<div id="todo-list"> 
    <input type="text" v-model="newTodo"> 
    <button v-on:click="addTodo">Add</button> 
    <ul> 
    <li v-if="todos.length" v-for="todo in todos" class="todo-item"> 
     {{ todo }} 
    </li> 
    </ul> 
</div> 

JS:

new Vue({ 
    el: '#todo-list', 
    data: { 
    todos: [], 
    newTodo: '' 
    }, 
    methods: { 
    addTodo:() => { 
     this.todos.push(this.newTodo); 
     this.clearNewTodo(); 
    }, 
    clearNewTodo:() => { 
     this.newTodo = ''; 
    } 
    } 
}); 

Answer 1

Quick Fix: don't use arrow functions to declare your Vue methods.

Was ist das Problem?

Sie erwarten die ES6 Pfeilfunktion () => {} Syntax, um den Kontext (this) das gleiche wie die alte Funktion Deklaration Syntax function() {} setzen würde.

Warum ist das ein Problem?

Von MDN:

Bis Pfeil Funktionen, jede neue Funktion einen eigenen diesen Wert definiert (ein neues Objekt bei einem Konstruktor, undefiniert im Strict-Modus Funktionsaufrufen, das Kontextobjekt, wenn die Funktion aufgerufen wird als "Objektmethode" usw.). Dies erwies sich bei einem objektorientierten Programmierstil als ärgerlich.

Also, Objekt Ihre Methoden sollte wie folgt aussehen (die alte Funktion Syntax):

methods: { 
    addTodo: function() { 
     this.todos.push(this.newTodo); 
     this.clearNewTodo(); 
    }, 
    clearNewTodo: function() { 
     this.newTodo = ''; 
    } 

} 

Oder diese (mit dem new method definition syntax)

methods: { 
    addTodo() { 
     this.todos.push(this.newTodo); 
     this.clearNewTodo(); 
    }, 
    clearNewTodo() { 
     this.newTodo = ''; 
    } 
    } 

Ich weiß nicht ein Darüber, wie Vue.js den Kontext an diesem Punkt einstellt/handhabt, sieht es so aus, als ob Ihre Methode aus Ihrer Vorlage/dem DOM aufgerufen wird und der Kontext von dort in Ihre Methode übernommen wird. Da die Pfeilfunktion ihren Kontext erbt, bezieht sich this auf das Objekt window.

Die Verwendung tatsächlicher Funktionsdeklarationen wird einen korrekten Verweis auf die gewünschte this beibehalten.

Answer 2

Es sieht aus wie die ES6 Pfeil Syntax Ihr Problem. Ändern Sie die traditionelle Funktion() Syntax verwenden und es wird funktionieren:

addTodo: function() { 
 
    this.todos.push(this.newTodo); 
 
    this.clearNewTodo(); 
 
}, 
 
clearNewTodo: function() { 
 
    this.newTodo = ''; 
 
}

Answer 3

Ihr Pfeil Vue Methoden bereits erhalten die this Objekt als ersten Parameter, so:

methods: { 
    addTodo: (_this) => { 
     _this.todos.push(_this.newTodo); 
     _this.clearNewTodo(); 
    }, 
    clearNewTodo: (_this) => { 
     _this.newTodo = ''; 
    } 
    } 

der Trick funktioniert, aber ich bin nicht sicher, dass Pfeil Funktionen etwas beitragen hier.