vue-计算属性不能直接修改
今天在开发的时候,遇到一个问题:
数据如下:
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-计算属性不能直接修改的更多相关文章
- Vue 计算属性 && 监视属性
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- Vue计算属性
github地址:https://github.com/lily1010/vue_learn/tree/master/lesson06 一 计算属性定位 当一些数据需要根据其它数据变化时,这时候就需要 ...
- 在做vue计算属性,v-for处理数组时遇到的一个bug
bug: You may have an infinite update loop in a component render function 无限循环 需要处理的数组(在 ** ssq **里): ...
- vue教程2-03 vue计算属性的使用 computed
vue教程2-03 vue计算属性的使用 computed computed:{ b:function(){ //默认调用get return 值 } } ---------------------- ...
- vue 计算属性 实例选项 生命周期
vue 计算属性: computed:{} 写在new vue()的属性,只要参与运算,数据不发生变化时,次计算只会执行一次,结果缓存,之后的计算会直接从缓存里去结果.如果其中的值发生变化(不管几个) ...
- Vue计算属性缓存(computed) vs 方法
Vue计算属性缓存(computed) vs 方法 实例 <div id="example"> <p>Original message: "{{ ...
- Vue计算属性computed的全面解析
前言 一直以来对computed这个计算属性都只停在一个大概的认知中,最近特意仔细研读相关资料,亲测后逐渐了解了其特性. 正文 computed 特点: 1.初始化/依赖属性(即data属性)改变时执 ...
- vue 计算属性实现过滤关键词
效果 html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...
- vue计算属性详解——小白速会
一.什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> ...
- Vue.js之Vue计算属性、侦听器、样式绑定
前言 上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用. 一.搭建一个Vue程序 1.1 搭建Vue环境 搭建Vue的开发环境总共有三种方法: 引入CDN <script src=& ...
随机推荐
- Java之批处理的实现
批处理(batch) 一.批处理介绍 1. 批处理指的是一次操作中执行多条SQL语句 2. 批处理相比于一次一次执行效率会提高很多 3. 批处理主要是分两步: 1.将要执行的SQL语句保存 2.执行S ...
- P4332 [SHOI2014]三叉神经树
\(\color{#0066ff}{ 题目描述 }\) 计算神经学作为新兴的交叉学科近些年来一直是学术界的热点.一种叫做SHOI 的神经组织因为其和近日发现的化合物 SHTSC 的密切联系引起了人们的 ...
- 10.6-10.7 牛客网NOIP模拟赛题解
留个坑... upd:估计这个坑补不了了 如果还补不了就删了吧
- Python学习之路--1.0 Python概述及基本数据类型
Python是一门解释性语言,弱类型语言 python程序的两种编写方式: 1.进入cmd控制台,输入python进入编辑模式,即可直接编写python程序 2.在.朋友文件中编写python代码,通 ...
- freemarker常用标签解释
标签一: if else 你可以使用if,elseif和else指令来条件判断是否越过模板的一个部分.这些condition-s必须计算成布尔值,否则错误将会中止模板处理.elseif-s和else- ...
- hdu-2036求任意多边形面积
改革春风吹满地 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Sub ...
- spring espect XX but YY
注入和查找问题 HSF Consumer bean, 注入的是beanName='实际接口名', type='HSFSpringConsumerBean', 造成Autowire时查询出来的类型不匹 ...
- mongodb在windows下安装
下载地址:https://www.mongodb.com/download-center/community 我下载的是zip版本 新建目录:data |_db |_log cmd到所下载的mongo ...
- pip 安装库的时候使用豆瓣镜像 提升效率
由于众所周知的原因,国内网络环境始终处于水深火热之中,python库的安装也不例外. 比如在安装 PyQt5-tools 的时候,网速奇慢无比. 好在国内有不少镜像服务源,以豆瓣为例,网速突飞猛进 使 ...
- my28_mysql内存占用过高降低的方法
对mysql做压力测试,测试完之后,mysql的内存一直不下降 $ free -m total used free shared buff/cache available Mem: Swap: # t ...