// 你的数据itemList结构改改 var vue = new Vue({ el: '#app', data: { itemList:[ {'text':'abc', 'active':false}, {'text':'abc', 'active':true} ], }, methods: { selectItem: function (index) { this.itemList[index].active = true; }, }, });

vue.itemList[index].active = true; vue modifiée en ceci

Y a-t-il une valeur pour console.log(index) dans selectItem Vous devriez l'utiliser pour obtenir cet objet vue

La méthode de modification des données est incorrecte, donc aucune erreur n'est signalée ?

var vue = new Vue({ el: '#app', data: { itemList:[ {'text':'abc', 'active':false}, {'text':'abc', 'active':true} ] }, methods: { selectItem: function (index) { this.itemList[index].active = true; } }, });

Selon le format de données que vous avez fourni, je l'ai essayé et cela fonctionne. Le code est le suivant
`

{{item.text}}

Dans vue, ce n'est pas via vue Même si vous utilisez une variable pour enregistrer l'instance de vue via ceci

vue.itemList[index].active = true; 换成 this.itemList[index].active = true;

Comment l'écrivez-vous dans votre html ? Bien que votre code js ne soit pas assez élégant, par exemple, il est plus approprié d'utiliser des tableaux au lieu d'objets ici, mais ce n'est pas faux, je pense que l'échec du rendu de votre dom est dû. ce n'est pas le problème ici. Cela devrait être lié au contrôle de formulaire, comme le problème du flux unidirectionnel de données sélectionnées.

Le mode valeur clé ne peut pas être surveillé par vue, vue fournit la méthode $set. . La suppression nécessite également
selectItem : function (index) {

var newA = this.itemList[index]; newA.active = true this.$set(this.itemList,index,newA)

},

Changez Vue par ceci et essayez-le

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