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

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