私のVueメソッドが適切なコンテキスト（データ）を参照していないのはなぜですか？

Question

addTodoがトリガーされ、その内部にthisがある場合、コンテキストはブラウザウィンドウであり、dataオブジェクトではありません。したがって、todosは未定義となります。

私が迷っているものは何ですか？

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

クイックフィックス：don't use arrow functions to declare your Vue methods.

問題は何ですか？

() => {}の構文では、コンテキスト（this）を旧関数の宣言構文function() {}と同じに設定すると期待しています。

なぜそれが問題ですか？ MDNから

：矢印機能まで

関数が呼び出された場合、すべての新しい機能がstrictモード関数呼び出しに未定義独自のこの値（コンストラクタの場合は、新しいオブジェクト、コンテキストオブジェクトを定義し「オブジェクトメソッド」など）。これは、オブジェクト指向のプログラミングスタイルに迷惑をかけることが判明しました。

だから、あなたのメソッドオブジェクトが（古い関数の構文を使用して）次のようになります。

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

} 

またはこの（new method definition syntaxを使用して）

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

私は知りませんここではVue.jsがコンテキストを設定/処理する方法について説明していますが、テンプレート/ DOMからメソッドが呼び出されており、コンテキストがそこからメソッドに渡されているようです。矢印関数はコンテキストを継承するため、thisはwindowオブジェクトを参照します。

実際の関数宣言を使用すると、希望するthisへの適切な参照が保持されます。

Answer 2

ES6の矢印構文があなたの問題であるように見えます。それは伝統的な機能（）構文を使用して変更し、それが動作します：

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

Answer 3

あなたの矢印Vueの方法はまだ、最初のパラメータとしてthisオブジェクトを取得している：

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

は、トリックを行いますが、私は矢印の機能がここで何を貢献していることを確認していません。