Task properties in Vue.js changed unexpectedly in to-do list app

Question

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

<template>
   <Task v-for="(task,key) in tasks" :id="key" :task="task" :key="key" />
</template>
<script>
import { defineComponent } from 'vue';
import Task from '../components/Task.vue'
import {mapGetters} from 'vuex'

export default defineComponent({
  name: 'PageIndex',
  components:{
    Task
  },
  computed:{
    ...mapGetters('task', ['tasks']) //Get tasks from the task module
  },
})
</script>

task.vue

<template>
    <q-item
        clickable
        :class="!task.completed ? 'bg-orange-1' : 'bg-green-1'"
        v-ripple>
        <q-item-section side top>
          <q-checkbox v-model="task.completed" /> //////////////// The problem lies in this line
        </q-item-section>

        <q-item-section>
          <q-item-label :class="{'text-strikethrough' :
          task.completed}">{{task.name}}</q-item-label>
        </q-item-section>
      </q-item>
</template>

<script>
    import {mapActions} from 'vuex'
    export default {
        props: ["task"],
    }
</script>

In the above code, in Task.vue

<q-checkbox v-model="task.completed" />

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

Answer 1

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-model directive will create a two-way data binding. Your task prop refers to an object in the state. When q-checkbox changes the value of task.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 template

<q-checkbox :value="task.completed" @input="updateTask({id: task.id, completed: !task.completed})" />

Also note that the actual prop and event names of the q-checkbox component may vary depending on how you implement it