我有一个包含状态、变化、获取器等的存储。状态包含以下任务列表。
1
834const state = {
tasks:[{
title: "起床",
completed: false
},
{
title: "项目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']) //从task模块获取任务
},
})
</script>
任务.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" /> /////////////// 问题出在这一行
</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>
在上面的代码中，在Task.vue中
<q-checkbox v-model="task.completed" />
问题出在这一行。如果我从上面给出的代码中删除 v-model="task.completed"，那么一切都正常工作，否则会抛出错误，错误信息为 Unexpected mutation of "task" prop
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
问题是你试图在mutation之外改变一个prop和相应的vuex状态。将一个值传递给
v-model指令将创建一个双向数据绑定。你的taskprop引用了状态中的一个对象，当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和事件名称可能会有所不同，这取决于你的实现方式