I have a store that contains states, changes, getters, etc. The status contains the following list of tasks.
const state = { tasks:[{ title: "Get up", completed: false }, { title: "Project 2", completed: false }, ] } Todo.vue
task.vue
//////////////// The problem lies in this line {{task.name}}
In the above code, in Task.vue
The problem is in this line. If I remove v-model="task.completed" from the code given above then everything works fine otherwise it throws an error with the message Unexpected mutation of "task" prop
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
The problem is that you are trying to change a prop and the corresponding vuex state outside of the mutation. Passing a value to the
v-modeldirective will create a two-way data binding. Yourtaskprop refers to an object in the state. Whenq-checkboxchanges the value oftask.completed, the object is updated directly in the state. Instead, you should create a mutation that updates your task:export const mutations = { updateTask(state, payload){ const task = state.tasks.find(t => t.id === payload.id); if(task) Object.assign(task, payload) } }Then you can use this mutation
in the templateAlso note that the actual prop and event names of the
q-checkboxcomponent may vary depending on how you implement it