Sifat tugas dalam Vue.js berubah secara tidak dijangka dalam apl senarai tugasan

Question

Saya mempunyai kedai yang mengandungi keadaan, perubahan, pengambil, dsb. Status mengandungi senarai tugasan berikut.

const state = {
   tugasan:[{
     tajuk: "Bangun",
     selesai: palsu
   },
   {
     tajuk: "Projek 2",
     selesai: palsu
   },
  ]
}

Todo.vue

<template>
   <Tugas v-untuk="(tugas,kunci) dalam tugas" :id="kunci"
</template>
<skrip>
import { defineComponent } daripada 'vue';
import Task daripada '../components/Task.vue'
import {mapGetters} daripada 'vuex'

eksport lalai defineComponent({
  nama: 'PageIndex',
  komponen:{
    Tugasan
  },
  dikira:{
    ...mapGetters('tugas', ['tugas']) //Dapatkan tugasan daripada modul tugas
  },
})
</script>

task.vue

<template>
    <q-item
        boleh diklik
        :class="!task.completed ? 'bg-oren-1' : 'bg-green-1'"
        v-riak>
        <bahagian atas bahagian q-item>
          <q-checkbox v-model="task.completed" /////////////// Masalahnya terletak pada baris ini
        </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>

<skrip>
    import {mapActions} daripada 'vuex'
    eksport lalai {
        prop: ["tugas"],
    }
</script>

Dalam kod di atas, dalam Task.vue

Masalahnya ada di baris ini. Jika saya mengalih keluar v-model="task.completed" daripada kod yang diberikan di atas maka semuanya berfungsi dengan baik jika tidak, ia akan menimbulkan ralat dengan mesej Mutasi "task" prop< /kod>
            

Answer 1

Masalahnya ialah anda cuba menukar prop dan keadaan vuex yang sepadan di luar mutasi. Apabila menghantar nilai kepada nilai v-model指令将创建一个双向数据绑定。你的task prop引用了状态中的一个对象，当q-checkbox改变task.completed, objek dikemas kini secara langsung dalam keadaan. Sebaliknya, anda harus membuat mutasi yang mengemas kini tugas anda:

export const mutations = {
  updateTask(state, payload){
    const task = state.tasks.find(t => t.id === payload.id);

    if(task) Object.assign(task, payload)
  }
}

Kemudian anda boleh menggunakan mutasi ini dalam templat anda

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

Juga ambil perhatian bahawa q-checkbox nama prop dan acara sebenar bagi komponen mungkin berbeza bergantung pada cara anda melaksanakannya