javascript - Kelas v-bind: dinamik yang menambah atribut melalui kawalan dalam senarai rendering li vue2.0 tidak berkuat kuasa serta-merta

Question

Sebagai contoh kod:
Langkah 1: Dapatkan tatasusunan objek data daripada pelayan: [obj, obj, obj],
Langkah 2: Tambahkan objek pelayar pada setiap sub-objek:

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

Langkah 3: Ikat atribut ini pada struktur html untuk mengawal kelas dinamik

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

Hasilnya ialah: atribut myobj telah ditukar kepada benar setiap kali anda mengklik, tetapi kelas dinamik tidak akan berkuat kuasa sehingga ul dimuat semula (apabila menyegarkan, data ul tidak akan diperoleh semula).

Answer 1

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

Answer 2

Jawapan betul di tingkat atas. Oleh kerana atribut ditambahkan secara dinamik, anda perlu menggunakan kaedah set yang disediakan oleh vue untuk menjadikan atribut sebagai atribut pengakses ES5 untuk menjejaki perubahan.