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

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

数据如下：

data(){

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

} ,

computed : {

　　couponList () {

　　　　var couponList = [] ;

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

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

　　　　});
　　　　return couponList;

　　}

methods : {

　　choose ( index ) {

　　}

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

</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;

}

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

vue-计算属性不能直接修改相关推荐

vue修改计算属性的值_八.Vue计算属性
Vue计算属性前言我们要做的是springboot和vue.js所做的前后端分离的hr项目,所以从来没接触到vue的小伙伴,可以这篇文章学Vue入门,这一篇就够了模板内的表达式非常便利,但是设 ...
oclick vue 传参函数_详解Vue计算属性和侦听属性
关注[搜狐技术产品]公众号,第一时间获取技术干货作者介绍: 本期特邀作者:浪里行舟 Github博客2600 star作者,专注于前端领域.个人公众号:「前端工匠」,致力于打造适合初中级工程师能够快 ...
5.Vue 计算属性和侦听器
Hello,我是 Alex 007,一个热爱计算机编程和硬件设计的小白,为啥是007呢?因为叫 Alex 的人太多了,再加上每天007的生活,Alex 007就诞生了. 5.Vue 计算属性和侦听器 ...
vue 计算属性和data_Vue:计算属性
一.为什么要使用计算属性 1.什么是计算属性计算属性:可以理解为能够在里面写一些计算逻辑的属性.具有如下的作用: 减少模板中的计算逻辑. 数据缓存.当我们的数据没有变化的时候,不会再次执行计算的过程 ...
Vue计算属性、方法、侦听器
文章目录一.基础计算模板二.计算属性computed 三.方法methods 四.侦听器watch 五.总结六.源码地址一.基础计算模板 <!DOCTYPE html> <h ...
Vue 计算属性 computed
<!--计算属性:1. 定义:要用的属性不存在,要通过已有的属性计算得来2. 原理:底层借助了 Object.defineProperty 方法提供的 getter 和 setter3. get ...
Vue计算属性、监视属性
一.Vue计算属性 1. 定义:要用的属性不存在,要通过已有属性计算得来 2. 原理:底层借助了Object.defineproperty方法提供的getter和setter 3. get函数什么时候 ...
vue计算属性-computed-完整写法
vue计算属性-完整写法目标: 计算属性也是变量, 如果想要直接赋值, 需要使用完整写法语法: computed: {"属性名": {set(值){},get() {retur ...
【猿说VUE】如影相随，VUE计算属性和监视
VUE计算属性和监视 5.1 计算属性 Vue中会有部分数据经常依赖于别的数据的改变而做出改变,并且变化逻辑也较复杂,这个时候就需要用到计算属性:computed,也就是说对于当前数据是不确定的,要经 ...
Vue计算属性（computed）和侦听器（watch）
Vue计算属性(computed)和侦听器(watch) 计算属性(computed) 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.所以不 ...

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

vue-计算属性不能直接修改相关推荐

最新文章

热门文章