以下に示すように、v-for を使用してこの itemList を html でレンダリングし、各アイテムの active を通じてこのアイテムに対応する html を表示 (v-show) するかどうかを制御します。 しかし、このようにイベントメソッドselectItemでitemListを変更した場合、domは更新されないのでしょうか？ ? ?
リーリー
vue.itemList[index].active = true に変更されました
selectItem に console.log(index) の値はありますか? この vue オブジェクトを取得するにはこれを使用する必要がありますか?
データの変更方法が間違っているため、エラーは報告されませんか?
提供されたデータ形式に従って、試してみたところ、コードは次のとおりです`<p id="app"><li v-for="(item,index) in itemList" v- on:click="selectItem(index)" v-if="item.active">
</li></p><スクリプト>
</script>`
vue 内では、変数を使用して vue のインスタンスを保存する場合でも、これを通して行われません
たとえば、ここではオブジェクトの代わりに配列を使用する方が適切ですが、あなたの dom のレンダリングの失敗は間違っていないと思います。ここでは問題ではなく、選択データの一方向の流れの問題など、フォーム コントロールにバインドされる必要があります。
キー値モードは vue では監視できません。vue は $set メソッドを提供します。 。削除には selectItem: function (index) {
}、
Vueをこれに変更して試してください
this.itemList.splice(index, 1, Object.assign({}, this.itemList[index], { active: true }))
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
リーリー
vue.itemList[index].active = true に変更されました
selectItem に console.log(index) の値はありますか? この vue オブジェクトを取得するにはこれを使用する必要がありますか?
データの変更方法が間違っているため、エラーは報告されませんか?
リーリー提供されたデータ形式に従って、試してみたところ、コードは次のとおりです
リーリー`<p id="app">
<li v-for="(item,index) in itemList" v- on:click="selectItem(index)" v-if="item.active">
</li>
リーリー</p>
<スクリプト>
</script>`
vue 内では、変数を使用して vue のインスタンスを保存する場合でも、これを通して行われません
リーリーたとえば、ここではオブジェクトの代わりに配列を使用する方が適切ですが、あなたの dom のレンダリングの失敗は間違っていないと思います。ここでは問題ではなく、選択データの一方向の流れの問題など、フォーム コントロールにバインドされる必要があります。
キー値モードは vue では監視できません。vue は $set メソッドを提供します。 。削除には
も必要です リーリーselectItem: function (index) {
}、
Vueをこれに変更して試してください
this.itemList.splice(index, 1, Object.assign({}, this.itemList[index], { active: true }))