vue.js改变数据后页面不改变，有动图演示描述问题

Question

我用iview的checkbox组件做一个三级的复选框，需要根据数据回显选中的数据，我在CheckBoxGroup上双向绑定了一个chenckedInfoi的数据，这里包含了初始选中的id,来达到回显效果。然后我点选单个checkbox，没问题，可以控制全选按钮的样式，但是我在全选的checkbox上绑定事件，设置chenckedInfoi却不能控制他下面的checkbox们选中，达不到全选效果，但是我如果在CheckBoxGroup双向绑定个单纯的数组，点全选时候设置这个数组，就可以达到全选效果，不知道为啥，上效果图，（打印的是经过事件设置好的chenckedInfoi）：

我的DOM结构：

事件

DOM代码（已经省略部分不重要代码）：

    <div class=" first-level" v-for="(v,i) in authInfo">
      <div class="first-level-title">
        <Checkbox
          :key="v.id"
          :indeterminate="firstIndeterminate"
          :checked="checkFirstAll"
        >
          {{v.name}}
        </Checkbox>
      </div>
      <div v-model="secondCheckGroup" class="second-level" v-for="(item,k) in v.children">
        <div class="second-level-title">

          <Checkbox
            :value="checkedInfo[i][k].length===item.children.length"
            :key="item.id"
            :indeterminate="checkedInfo[i][k].length!==item.children.length && checkedInfo[i][k].length!==0"
            @click.prevent.native="thirdAll(i,k)"
          >
            {{item.name}}
          </Checkbox>
        </div>
        {{`选中的个数-------${checkedInfo[i][k].length}`}}
            <CheckboxGroup class="third-level" v-model="checkedInfo[i][k]">
              <Checkbox v-for="m in item.children" :label="m.id" :key="m.id">
                {{m.name}}
              </Checkbox>
            </CheckboxGroup>

      </div>
    </div>

js代码：

      data(){
          return{

             checkedInfo:[]//用于复选框双向绑定的数据
          }
      },
            created(){
        axios.get(`${API}/role/info`,{
          params:{
            id:this.$route.query.id
          }
        }).then(response=>{
          let res = response.data;
          if(res.result){
            this.roleInfo = res.data.roleInfo;
            //请求回来的授权数据（也就是复选框选中的数据）
            this.authInfo = res.data.authInfo.data;
            
            //设置初始选中项
            this.authInfo.forEach((v,i)=>{
            //循环，让checkedInfo结构与DOM层级结构一致
              this.checkedInfo.push([]);
              v.children.forEach((m,n)=>{
                this.checkedInfo[i].push([]);
                console.log(m.children)
                m.children.forEach((j,k)=>{
                  if(j.status){
                    this.checkedInfo[i][n].push(j.id)
                  }
                })
              })
            })
          }
        });
      },

      methods:{
        //全选事件
        thirdAll(i,k){
          let tempArr = [];
          this.authInfo[i].children[k].children.forEach(v=>{
            tempArr.push(v.id)
          });
          this.checkedInfo[i][k] = tempArr;
          console.log(this.checkedInfo[i][k]);
        },
    }

Answer 1

之前的回答，不要直接操作数组下标赋值
https://segmentfault.com/q/10...

Answer 2

vue.js文档说得很清楚了：https://cn.vuejs.org/v2/guide...