Aufgabeneigenschaften in Vue.js wurden in der Aufgabenlisten-App unerwartet geändert

Question

Ich habe einen Speicher, der Zustände, Änderungen, Getter usw. enthält. Der Status enthält die folgende Aufgabenliste.

const state = {
   Aufgaben:[{
     Titel: „Steh auf“,
     abgeschlossen: falsch
   },
   {
     Titel: „Projekt 2“,
     abgeschlossen: falsch
   },
  ]
}

Todo.vue

<template>
   <Aufgabe v-for="(Aufgabe, Schlüssel) in Aufgaben" :task="task"
</template>
<script>
import { defineComponent } from 'vue';
Aufgabe aus „../components/Task.vue“ importieren
{mapGetters} aus 'vuex' importieren

Standard exportieren defineComponent({
  Name: 'PageIndex',
  Komponenten:{
    Aufgabe
  },
  berechnet:{
    ...mapGetters('task', ['tasks']) //Aufgaben aus dem Aufgabenmodul abrufen
  },
})
</script>

task.vue

<template>
    <q-Item
        anklickbar
        :class="!task.completed ? 'bg-orange-1' : 'bg-green-1'"
        V-Welligkeit>
        <q-item-section side top>
          <q-checkbox v-model="task.completed" ////////////// Das Problem liegt in dieser Zeile
        </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>
    {mapActions} aus 'vuex' importieren
    Standard exportieren {
        Requisiten: ["Aufgabe"],
    }
</script>

Im obigen Code in Task.vue

Das Problem liegt in dieser Zeile. Wenn ich v-model="task.completed" aus dem oben angegebenen Code entferne, funktioniert alles einwandfrei, andernfalls wird ein Fehler mit der Meldung Unerwartete Mutation von „task“ prop< ausgegeben. /code>

Answer 1

问题是你试图在mutation之外改变一个prop和相应的vuex状态。将一个值传递给v-model指令将创建一个双向数据绑定。你的task prop引用了状态中的一个对象，当q-checkbox改变task.completed的值时，对象直接在状态中更新。相反，你应该创建一个mutation来更新你的任务：

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

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

然后你可以在模板中使用这个mutation

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

还要注意，q-checkbox组件的实际prop和事件名称可能会有所不同，这取决于你的实现方式