Vue.js中的任務屬性在待辦事項清單應用程式中發生了意外變化
P粉966979765
2023-08-26 12:04:57
<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>
問題是你試圖在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和事件名稱可能會有所不同，這取決於你的實作方式