vue-计算属性不能直接修改

今天在开发的时候,遇到一个问题:

数据如下:

data(){

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

} , 

computed : {

  couponList () {

    var couponList = [] ;

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

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

    });
    return couponList;

  }

},

methods : {

  choose ( index ) {

  }

}


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

  

 

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

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;

}

 

转载于:https://www.cnblogs.com/vs1435/p/6727521.html

你可能感兴趣的:(vue-计算属性不能直接修改)