在单击处理程序中使用实例方法

Question

我有一个有删除方法的Todo类。我想将delete方法用作@click处理程序：

<div v-for="todo in todos">
    <v-btn @click="todo.delete">Delete</v-btn>
</div>

不幸的是，这给了我：

Invalid handler for event "click": got undefined

Answer 1

这是一个简单的codepen示例，显示了核心概念的工作原理：https://codepen.io/nickforddesign/pen/YYwgKx

问题是您的待办事项数组中的项目没有该方法。

<div class="app">
  <ul>
    <li v-for="todo in todos">
      {{ todo }}
      <button @click="todo.delete">Delete</button>
    </li>
  </ul>
</div>

和js

new Vue({
  el: '.app',
  data() {
    return {
      todos: [{
        name: '1',
        delete() {
          alert(`delete`)
        }
      },{
        name: '2',
        delete() {
          alert(`delete`)
        }
      }]
    }
  }
})