ToDo リスト アプリで Vue.js のタスク プロパティが予期せず変更されました

Question

<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><

Answer 1

問題は、ミューテーションの外側で prop と対応する vuex の状態を変更しようとしているということです。 v-model ディレクティブに値を渡すと、双方向のデータ バインディングが作成されます。 task プロパティはステート内のオブジェクトを参照します。q-checkbox が task.completed の値を変更すると、オブジェクトはステート内で直接更新されます。代わりに、タスクを更新するミューテーションを作成する必要があります:

リーリー

これで、この変異をテンプレートで使用できるようになります

リーリー

また、q-checkbox コンポーネントの実際のプロップ名とイベント名は、実装方法によって異なる場合があることにも注意してください