Vue中动态添加Class

Question

在项目中有个v-for循环出来的列表，循环对象在computed周期里
现在想对这个列表添加点击事件，点击时添加一个class，但是并没有立即成功（更新dom？），要在别的地方触发别的事件（如果有的话）才有反应。

下面附上代码：
html:

<div class="col-5" v-for="(item,index) in arr">
      <p v-bind:class="{'selectActive':item.checked}" v-on:click="isActive(item)" :key="item.id">{{item.text}}</p>
    </div>
  </div>

js:

export default {
    name: 'App2',
    data () {
        return {
            //由于一些需求，arr不能写在这
        }
    },
    methods:{
        isActive:function(item,status){
            console.log(item.checked)
            if(typeof item.checked == 'undefined') {
                this.$set(item,'checked',true);
            } else {
                item.checked = !item.checked;
            }
            console.log(item.checked)
        },
    },
    computed:{
        arr:function(){
            return [
              {text:"A"},
              {text:"B"},
              {text:"C"},
              {text:"D"}
            ]
        },
    }
}

css:

.col-5 {
    float:left;
    width: 25%;
    color:#fff;
}
.col-5 p {
    background: #000;
    line-height: 50px;
    text-align: center;
}
.col-5 p.selectActive {
    background: #f00;
}

请大佬们指教一下……

Answer 1

你直接调用this.$set(item,'checked',true);无法触发视图更新，因为你computed中的arr依赖的值不是data中的数据，可以手动触发视图更新。

      isActive:function(item,status){
          console.log(item.checked)
          if(item.checked == undefined) {
              item.checked = true
          } else {
              item.checked = !item.checked
          }
          this.$forceUpdate()
          console.log(item.checked)
      },

建议你arr还是写在data中。

Answer 2

在data里面设置字段，这样应该可以触发事件：
data () {
     return {
         arr: [
            {text:"A",checked:false},
            {text:"B",checked:false},
            {text:"C",checked:false},
            {text:"D",checked:false}
         ]
        }
  },