クリック処理でインスタンスメソッドを使用

Question

私は削除メソッドを持つTodoクラスを持っています。私は@clickハンドラとしてdeleteメソッドを使用したい：

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

は、残念ながら、これは私を与える：https://codepen.io/nickforddesign/pen/YYwgKx

：

Invalid handler for event "click": got undefined 

Answer 1

は、ここでコアコンセプトの作業を示して簡単なcodepen例です問題は、あなたの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`) 
     } 
     }] 
    } 
    } 
})