Vue.js 组件方法“未在实例上定义”

Question

我正在学习 vue.js 并使用 vue-cli 来设置一个新项目。现在我尝试向组件添加方法但出现问题：

<template>
  <div>
      <div v-for="task in $state.settings.subtasks">
        <input type="text" v-model="task.text">
        <input type="text" v-model="task.assignedTo">
        <input type="button" v-on:click="removeTask(task)">
      </div>
  </div>
</template>

<script>
export default {
  name: 'settings',
  methods:{
    removeTask:function(task){
       console.log("remove task");
    } 
  }
}

单击按钮应该调用 removeTask 函数，但它只是在控制台中输出错误：

[Vue warn]: Property or method "removeTask" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Settings> at src/views/Settings.vue
       <App> at src/App.vue
         <Root>

这里有什么问题？

Answer 1

当我回到我的问题时，我注意到我错过了 </script> 结束标记。添加解决了我的问题。