ToDo リスト アプリで Vue.js のタスク プロパティが予期せず変更されました
<p>状態、変更、ゲッターなどを含むストアがあります。ステータスには次のタスクのリストが含まれます。 </p>
<pre class="brush:php;toolbar:false;">const state = {
タスク:[{
タイトル:「立ち上がれ」
完了: false
}、
{
タイトル: 「プロジェクト 2」、
完了: false
}、
]
}</pre>
<p><code>Todo.vue</code></p>
<pre class="brush:php;toolbar:false;"><テンプレート>
<Task v-for="(task,key) in Task" :id="key" :task="task" :key="key" />
</テンプレート>
<スクリプト>
import {defineComponent} から 'vue';
「../components/Task.vue」からタスクをインポートします
「vuex」から {mapGetters} をインポートします
デフォルトのエクスポートdefineComponent({
名前: 'ページインデックス',
コンポーネント:{
タスク
}、
計算:{
...mapGetters('task', ['tasks']) //タスクモジュールからタスクを取得します
}、
})
</script></pre>
<p><code>task.vue</code></p>
<pre class="brush:php;toolbar:false;"><テンプレート>
<q-checkbox v-model="task.completed" /> //////////////// 問題はこの行にあります
</q-アイテムセクション>
<q項目セクション>
<q-item-label :class="{'テキストの取り消し線' :
task.completed}">{{task.name}}</q-item-label>
</q-アイテムセクション>
</q-item>
</テンプレート>
<スクリプト>
「vuex」から {mapActions} をインポートします
デフォルトのエクスポート {
小道具: ["タスク"]、
}
</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>"task" prop の予期しない突然変異<」というメッセージでエラーがスローされます。 /code><
