Les propriétés des tâches dans Vue.js ont changé de manière inattendue dans l'application de liste de tâches

Question

J'ai un magasin qui contient des états, des modifications, des getters, etc. Le statut contient la liste de tâches suivante.

const state = {
   Tâches:[{
     titre : "Lève-toi",
     complété : faux
   },
   {
     titre : « Projet 2 »,
     complété : faux
   },
  ]
}</pré>
<p><code>Todo.vue</code></p>
<pre class="brush:php;toolbar:false;"><template>
   <Tâche v-for="(tâche, clé) dans les tâches" :id="clé" :tâche="tâche" :clé="clé" />
</modèle>
<script>
importer {defineComponent} depuis 'vue' ;
importer la tâche depuis '../components/Task.vue'
importer {mapGetters} depuis 'vuex'

exporter le composant défini par défaut ({
  nom : 'PageIndex',
  Composants:{
    Tâche
  },
  calculé :{
    ...mapGetters('task', ['tasks']) //Récupère les tâches du module de tâches
  },
})
</script>

task.vue

<template>
    <q-élément
        cliquable
        :class="!task.completed ? 'bg-orange-1' : 'bg-green-1'"
        v-ondulation>
        <côté de la section q-item en haut>
          <q-checkbox v-model="task.completed" /> //////////////// Le problème réside dans cette ligne
        </q-item-section>

        <section-élément-q>
          <q-item-label :class="{'text-strikethrough' :
          task.completed}">{{task.name}}</q-item-label>
        </q-item-section>
      </q-item>
</modèle>

<script>
    importer {mapActions} depuis 'vuex'
    exporter par défaut {
        accessoires : ["tâche"],
    }
</script>

Dans le code ci-dessus, dans Task.vue

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

Le problème réside dans cette ligne. Si je supprime v-model="task.completed" du code donné ci-dessus, alors tout fonctionne correctement, sinon cela génère une erreur avec le message Mutation inattendue de la prop "task"< /code>

Answer 1

Le problème est que vous essayez de modifier un accessoire et l'état vuex correspondant en dehors de la mutation. Lors du passage d'une valeur à la valeur de v-model指令将创建一个双向数据绑定。你的task prop引用了状态中的一个对象，当q-checkbox改变task.completed, l'objet est mis à jour directement dans l'état. Au lieu de cela, vous devez créer une mutation qui met à jour votre tâche :

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

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

Ensuite, vous pouvez utiliser cette mutation dans votre modèle

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

Notez également que les noms réels des accessoires et des événements du q-checkboxcomposant peuvent varier en fonction de la façon dont vous l'implémentez