属性或方法“ cancella”未在实例上定义，但在渲染期间被引用

Question

我有这个问题。在脚本上执行“删除”功能后，无法使用它。标题名称是出现在终端上的短语。有谁知道错误可能在哪里？

这是我的模板

template: '<li> <div> <img width="15" height="15" src="img/trash.png" alt="icon_trash" @click="cancella()">{{todo.name }} </div> </li>'
})

有了这个模板，我旁边有一个带有图像的列表。当您单击图像时，它将删除我的todo.name

这是用于模板

Vue.component('todo-item', {
    props: ['todo'],
    template: '<li> <div> <img width="15" height="15" src="img/trash.png" alt="icon_trash" @click="cancella()">{{todo.name }} </div> </li>'
})

这是提取功能

@PostMapping("rimuovi")
   public void rimuovi(@RequestBody EntryList item) {
      al.remove(item.getId());
   }

这是我的功能cancella

cancella: function()
            {            
                  var rimozione=
                  {
                     id: 0,
                     name: this.product,
                  }

                  console.log(JSON.stringify(rimozione));

                  fetch('rimuovi', 
                  {
                     method: 'post',
                     headers: 
                     {
                        'Content-Type': 'application/json'
                     },
                     body: JSON.stringify(rimozione),  
                  })
             }