javascript - 在点击处理程序中使用实例方法

Question

我有一个 Todo 类，它有一个 delete 方法。我想将 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

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

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

<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`)
        }
      }]
    }
  }
})