javascript - vue2.0 的渲染清單li中透過控制新增屬性的動態v-bind:class不會立即生效

Question

例如程式碼：
第一步：從服務端取得一個資料物件array：[obj,obj,obj],
第二步：為每個子物件新增一個瀏覽器物件obj:

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

第三步：將該屬性綁定在html結構上用來控制動態的class

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

出來的結果就是：每次點擊時myobj屬性已經改為true,但是需要ul刷新的時候動態的class才會生效,(刷新的時候,不會重新獲取ul的資料)。

Answer 1

雷雷

Answer 2

樓上正解。因為屬性是動態新增的，需要使用vue提供的set方法，使該屬性為ES5的存取器屬性，即可追蹤變化。