JavaScript - vue 変数の更新で dom 更新をトリガーできません

Question

以下に示すように、v-for を使用してこの itemList を html でレンダリングし、各アイテムの active を通じてこのアイテムに対応する html を表示 (v-show) するかどうかを制御します。
しかし、このようにイベントメソッドselectItemでitemListを変更した場合、domは更新されないのでしょうか？ ? ?

リーリー

Answer 1

リーリー

Answer 2

vue.itemList[index].active = true に変更されました

Answer 3

selectItem に console.log(index) の値はありますか? この vue オブジェクトを取得するにはこれを使用する必要がありますか?

Answer 4

データの変更方法が間違っているため、エラーは報告されませんか?

リーリー

Answer 5

提供されたデータ形式に従って、試してみたところ、コードは次のとおりです
`<p id="app">
<li v-for="(item,index) in itemList" v- on:click="selectItem(index)" v-if="item.active">

リーリー

</li>
</p>
<スクリプト>

リーリー

</script>`

Answer 6

vue 内では、変数を使用して vue のインスタンスを保存する場合でも、これを通して行われません

リーリー

Answer 7

たとえば、ここではオブジェクトの代わりに配列を使用する方が適切ですが、あなたの dom のレンダリングの失敗は間違っていないと思います。ここでは問題ではなく、選択データの一方向の流れの問題など、フォーム コントロールにバインドされる必要があります。

Answer 8

キー値モードは vue では監視できません。vue は $set メソッドを提供します。 。削除には
selectItem: function (index) {

も必要です リーリー

}、

Answer 9

Vueをこれに変更して試してください

Answer 10

this.itemList.splice(index, 1, Object.assign({}, this.itemList[index], { active: true }))