javascript - La classe dynamique v-bind: qui ajoute des attributs via le contrôle dans la liste de rendu li de vue2.0 ne prend pas effet immédiatement

Question

Par exemple de code :
Étape 1 : Obtenez un tableau d'objets de données à partir du serveur : [obj, obj, obj],
Étape 2 : Ajoutez un objet navigateur obj à chaque sous-objet :

    for(let i = 0; i<array.length; i++){
        array[i].myObj = false,
    }
    添加之后的结果是每一个数组子对象obj中的属性里面就会多了一个自定义的浏览器对象属性：myObj:false

Étape 3 : Liez cet attribut à la structure HTML pour contrôler la classe dynamique

html:
  <ul>
      <li v-for='item in array' @click='changeBg(item)'>
          <span :class='{'change_bg':item.myObj}'>qwer</span>
      </li>
  </ul>
 js:
    methods: {
        changeBg(item){
           item.myObj = true 
        }
    }
css:
.change_bg
  background: red

Le résultat est : l'attribut myobj a été modifié en true à chaque fois que vous cliquez dessus, mais la classe dynamique ne prendra effet que lorsque ul sera actualisé (une fois actualisée, les données ul ne seront pas réacquises).

Answer 1

array[i].myObj = false
改为
this.array.$set(i, {myObj: false})

Answer 2

Bonne réponse à l’étage. Étant donné que l'attribut est ajouté dynamiquement, vous devez utiliser la méthode set fournie par vue pour faire de l'attribut un attribut accesseur ES5 afin de suivre les modifications.