vue $set 给数据赋值的实例


Posted in Javascript onNovember 09, 2019

如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。

业务介绍:模拟后台数据向DOM树上遍历数据,再向数据里添加状态属性,根据状态改变显示图片,默认nochecked.png,点击时改变状态。显示checked.png

DOM树

<div class="cartContent" :class="{'bg' : status == 2}" v-for="(val,key) in imgListData" :id="key">
<div class="choose">
![](../assets/img/radio-checked.png)
![](../assets/img/radio-nochecked.png)
</div>
.........
</div>

模拟数据

data(){
     return{
      responseData:[
        {'id':'1','name':'女装','price':115,'num':1,'pic':'../static/img/1.jpg'},
        {'id':'2','name':'男装','price':110,'num':1,'pic':'../static/img/2.jpg'},
        {'id':'3','name':'童装','price':118,'num':2,'pic':'../static/img/3.jpg'}
        ],
      imgListData:[]
     }
   },

向原数据添加新属性status

created() {
    this.allDataList()
},
methods:{
    allDataList(){
      for(let val of this.responseData){
//       val.status=false;//写这个有问题
       this.$set(val,'status',false)//此处为重点
       this.imgListData.push(val)
      }
       console.log(this.imgListData)
}

点击事件(根据索引改变当前属性的状态)

choose(index){
    if(this.imgListData[index].status){
     this.imgListData[index].status=false;
    }else{
     this.imgListData[index].status=true
    }
 },

输出发现有status属性,状态也由false改为了true,但是就是样式要刷新一下才能显示。把里面的属性仔细看一遍原来status没有get/set方法。错误展示:

vue $set 给数据赋值的实例

把 val.status=false; 改为this.$set(val,'status',false)问题就解决了。

以上这篇vue $set 给数据赋值的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在JavaScript中使用inline函数的问题
Mar 08 Javascript
js单例模式的两种方案
Oct 22 Javascript
Jquery实现的一种常用高亮效果示例代码
Jan 28 Javascript
JavaScript驾驭网页-获取网页元素
Mar 24 Javascript
jQuery侧边栏实现代码
May 06 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
Jun 03 Javascript
JS从数组中随机取出几个数组元素的方法
Aug 02 Javascript
基于vue.js实现侧边菜单栏
Mar 20 Javascript
vue全局组件与局部组件使用方法详解
Mar 29 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
Jan 15 Javascript
Vue2.0实现简单分页及跳转效果
Jul 29 Javascript
微信小程序sessionid不一致问题解决
Aug 30 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
Nov 09 #Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
Nov 09 #Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
Nov 09 #Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
Nov 09 #Javascript
Vue实现点击按钮复制文本内容的例子
Nov 09 #Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 #Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
Nov 09 #Javascript
You might like
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
php学习笔记(三)操作符与控制结构
2011/08/06 PHP
如何用php获取文件名后缀
2013/06/09 PHP
PHP文件上传问题汇总(文件大小检测、大文件上传处理)
2015/12/24 PHP
使用PHPExcel实现数据批量导出为excel表格的方法(必看)
2017/06/09 PHP
PHP实现的贪婪算法实例
2017/10/17 PHP
php文件包含的几种方式总结
2019/09/19 PHP
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
js 幻灯片的实现
2011/12/06 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
2013/12/16 Javascript
jQuery - css() 方法示例详解
2014/01/16 Javascript
jQuery学习笔记之jQuery原型属性和方法
2014/06/09 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
2015/12/04 Javascript
JS组件Bootstrap实现图片轮播效果
2016/05/16 Javascript
老生常谈JavaScript 函数表达式
2016/09/01 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
2016/12/23 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
使用JS模拟锚点跳转的实例
2018/02/01 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
2018/09/28 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
numpy中矩阵合并的实例
2018/06/15 Python
Python列表解析配合if else的方法
2018/06/23 Python
详解python中list的使用
2019/03/15 Python
python中for循环把字符串或者字典添加到列表的方法
2019/07/20 Python
python requests证书问题解决
2019/09/05 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
高级护理专业毕业生推荐信
2013/12/25 职场文书
情人节活动策划方案
2014/02/27 职场文书
法定代表人授权委托书范文
2014/08/02 职场文书
创先争优个人承诺书
2014/08/30 职场文书
暂停营业通知
2015/04/25 职场文书
2015年教师个人业务工作总结
2015/10/23 职场文书
redis复制有可能碰到的问题汇总
2022/04/03 Redis