javascript - 为什么我的 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

看起来 ES6 箭头语法是你的问题。将其更改为使用传统的 function() 语法，它将起作用:

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