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

数据如下:

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;

}

vue-计算属性不能直接修改的更多相关文章

  1. Vue 计算属性 && 监视属性

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  2. Vue计算属性

    github地址:https://github.com/lily1010/vue_learn/tree/master/lesson06 一 计算属性定位 当一些数据需要根据其它数据变化时,这时候就需要 ...

  3. 在做vue计算属性,v-for处理数组时遇到的一个bug

    bug: You may have an infinite update loop in a component render function 无限循环 需要处理的数组(在 ** ssq **里): ...

  4. vue教程2-03 vue计算属性的使用 computed

    vue教程2-03 vue计算属性的使用 computed computed:{ b:function(){ //默认调用get return 值 } } ---------------------- ...

  5. vue 计算属性 实例选项 生命周期

    vue 计算属性: computed:{} 写在new vue()的属性,只要参与运算,数据不发生变化时,次计算只会执行一次,结果缓存,之后的计算会直接从缓存里去结果.如果其中的值发生变化(不管几个) ...

  6. Vue计算属性缓存(computed) vs 方法

    Vue计算属性缓存(computed) vs 方法 实例 <div id="example"> <p>Original message: "{{ ...

  7. Vue计算属性computed的全面解析

    前言 一直以来对computed这个计算属性都只停在一个大概的认知中,最近特意仔细研读相关资料,亲测后逐渐了解了其特性. 正文 computed 特点: 1.初始化/依赖属性(即data属性)改变时执 ...

  8. vue 计算属性实现过滤关键词

    效果 html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...

  9. vue计算属性详解——小白速会

    一.什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> ...

  10. Vue.js之Vue计算属性、侦听器、样式绑定

    前言 上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用. 一.搭建一个Vue程序 1.1 搭建Vue环境 搭建Vue的开发环境总共有三种方法: 引入CDN <script src=& ...

随机推荐

  1. git配置项目

    1.下载安装完git 2.在git oschina上发布项目 3.管理-公匙管理 4.git上面生成公匙 $ cat ~/.ssh/id_rsa.pub 5.将公匙复制进 git oschina 管理 ...

  2. Spring IOC机制使用SpEL

    一.SpEL 1.1       简介 Spring Expression Language,Spring表达式语言,简称SpEL.支持运行时查询并可以操作对象图. 和JSP页面上的EL表达式.Str ...

  3. Express全系列教程之(十):jade模板引擎

    一.前言 随着前端业务的不断发展,页面交互逻辑的不断提高,让数据和界面实现分离渐渐被提了出来.JavaScript的MVC思想也流行了起来,在这种背景下,基于node.js的模板引擎也随之出现. 什么 ...

  4. Functions that return a function

    javascript学习中,经常会遇到闭包的问题,然后闭包的很多例子中又会遇到很多返回函数的闭包的例子程序.因为对闭包的理解还不够透彻,然后对于Functions rerurn a function产 ...

  5. IDEA 文档注释 乱码 终极... 解决方案

    idea bin 目录 下           phpstorm64.exe.vmoptions  最后一行添加  : -Dfile.encoding=UTF-8

  6. Luogu P5122 [USACO18DEC]Fine Dining 最短路

    先跑一遍n为起点最短路,再新开一个点,向有干草垛的点连一根边权为d[u]-w的有向边(很重要..我当时连的无向边,然后我死了.),相当于用价值抵消一部分边权, 然后以这个新的点为起点跑最短路就好了.. ...

  7. Flask&&人工智能AI -- 8 HTML5+ 初识,HBuilder,夜神模拟器,Webview

    昨日内容回顾 1.增删改查: 增: db.collections.insert({a:1}) // 官方不推荐了 db.collections.insertMany([{a:1},{b:1}]) in ...

  8. LocalDate test

    import java.time.LocalDate; import java.time.LocalDateTime; import java.time.ZoneId; import java.tim ...

  9. Pycharm在线/手动离线安装第三方库-以scapy为例(本地离线添加已经安装的第三方库通过添加Path实现)

    在线安装运行Pycharm,打开需要添加scapy文件的项目,以TestScapy为例           点击工具栏的File选项,选中Settings,单击打开                  ...

  10. Nohup后台运行程序

    场景:我现在需要跑脚本批量处理一些数据,但是我又不想盯着控制台看这个脚本的输出结果,想把这些输出结果记录到一个日志文件里面 方案:可以使用 Linux 的 nohup 命令,把进程挂起,后台执行 用法 ...