今天在开发的时候，遇到一个问题：

数据如下：

data(){

　　queryCouponList : [] // 通过接口，会更新该数据

} , 

computed : {

　　couponList () {

　　　　var couponList = [] ;

　　　　this.queryCouponList.forEach( (coupon) => {

　　　　　　............

　　　　});
　　　　return couponList;

　　}

},

methods : {

　　choose ( index ) {

　　}

}

页面：(i标签是一个自定义的复选框，有common-checkbox-cbg 样式   复选框打钩 ， 没有就不打勾)

<div class="ui-t-r" v-for="( item , index ) of couponList">

　　<i @click="choose( index )" v-bind:class="{'common-checkbox-cbg': item.check == true }" class="common-checkbox"></i>

</div>

 

问题：如果直接修改计算属性的值，点击复选框，页面不会切换状态，也就是复选框不会再 打钩 与不打勾 切换 ，代码：

choose ( index ) {

　　var _copy = JSON.parse( JSON.stringify(this.couponList ) ) ;
　　_copy[index].check = !_copy[index].check ;
　　this.couponList =_copy;

}

 

解决方案： 修改原始属性

choose ( index ) {

　　var _copy = JSON.parse( JSON.stringify(this.queryCouponList ) ) ;
　　_copy[index].check = !_copy[index].check ;
　　this.queryCouponList =_copy;

}