Vue.js中的任务属性在待办事项列表应用程序中发生了意外变化
<p>我有一个包含状态、变化、获取器等的存储。状态包含以下任务列表。</p>
<pre class="brush:php;toolbar:false;">const state = {
tasks:[{
title: "起床",
completed: false
},
{
title: "项目2",
completed: false
},
]
}</pre>
<p><code>Todo.vue</code></p>
<pre class="brush:php;toolbar:false;"><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></pre>
<p><code>任务.vue</code></p>
<pre class="brush:php;toolbar:false;"><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></pre>
<p>在上面的代码中，在Task.vue中</p>
<pre class="brush:php;toolbar:false;"><q-checkbox v-model="task.completed" /></pre>
<p>问题出在这一行。如果我从上面给出的代码中删除 <code>v-model="task.completed"</code>，那么一切都正常工作，否则会抛出错误，错误信息为 <code>Unexpected mutation of "task" prop</code></p>
1
686
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
问题是你试图在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和事件名称可能会有所不同，这取决于你的实现方式