Les propriétés des tâches dans Vue.js ont changé de manière inattendue dans l'application de liste de tâches
P粉966979765
2023-08-26 12:04:57
<p>J'ai un magasin qui contient des états, des modifications, des getters, etc. Le statut contient la liste de tâches suivante. </p>
<pre class="brush:php;toolbar:false;">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></pre>
<p><code>task.vue</code></p>
<pre class="brush:php;toolbar:false;"><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></pre>
<p>Dans le code ci-dessus, dans Task.vue</p>
<pre class="brush:php;toolbar:false;"><q-checkbox v-model="task.completed" /></pre>
<p>Le problème réside dans cette ligne. Si je supprime <code>v-model="task.completed"</code> du code donné ci-dessus, alors tout fonctionne correctement, sinon cela génère une erreur avec le message <code>Mutation inattendue de la prop "task"< /code></p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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指令将创建一个双向数据绑定。你的taskprop引用了状态中的一个对象，当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