javascript - 为什么我的Vue方法没有引用正确的上下文(数据)？

触发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 = '';
    }
  }
});

最佳答案

看来ES6箭头语法是您的问题。更改它以使用传统的function（）语法，它将起作用：

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