I recently started learning vue.js and decided to use vue-cli to set up a new project. As I was working on adding a method to a component, I encountered some issues:
<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 function called");
}
}
}
When clicking the button, instead of calling the removeTask function as expected, an error is displayed in the console:
[Vue warn]: Property or method "removeTask" is not defined on the instance but referenced during render. Ensure that this property is reactive by either including it in the data option, or for class-based components, initializing the property. More information can be found at: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <Settings> at src/views/Settings.vue
<App> at src/App.vue
<Root>
Can anyone spot what might be causing this issue?