vue中利用对象和数组进行样式控制出现的问题

Question

<li v-for="n in balls_num[1]" :class="{ 'select-balls-active': select_balls_active[1][n] }" v-on:click="select_balls_click_1(1,n-1)">{{ n-1 }}</li>

data:{
    select_balls_active:{
        0:[],
        1:[],
        2:[],
        3:[],
        4:[],
        5:[]
    },
},

created(){
    for(var i in this.select_balls_active){
        for(var j = 0;j <= this.balls_num[i];j++){
            this.select_balls_active[i].push(1);
        }
    }
    console.log(this.select_balls_active);
},

select_balls_click_1:function(i,n){
    console.log(n);
    console.log(this.select_balls_active[1][n]);
    this.select_balls_active[1][n] = 0;
    console.log(this.select_balls_active[1][n]);
},

无法通过该方法实现点击后改变元素样式，但是明明可以打印出0或1，而且如果直接在方法里写this.select_balls_active[1][2] = 0;这样却可以改变单个元素的样式，不明白为什么改成了参数引用的形式就不行了。。

Answer 1

自己找到解决方案了。。通过这篇文章https://www.cnblogs.com/zhuzh...，原来是vue会将所有data中的东西都看成对象并遍历其属性，但本身并不能检测到对象的添加或删除，而是通过watcher与访问器实现双向绑定，数组中的index可以看作属性，但是由于不是如对象一样一开始就有的因此无法响应

使用 vm.$set 将响应属性添加到嵌套的对象上可以实现点击改变元素的样式了

select_balls_click_1:function(i,n){
    this.$set(this.select_balls_active[i],n,0);
}