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对象链式操作代码(jquery)
Jul 04 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 Javascript
javascript伸缩型菜单实现代码
Nov 16 Javascript
js实现微信分享代码
Oct 11 Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 Javascript
javascript 用函数实现继承详解
May 28 Javascript
Vue.js组件tab实现选项卡切换
Mar 23 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
Sep 15 Javascript
详解基于vue-cli配置移动端自适应
Jan 13 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
Aug 27 Javascript
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
JavaScript 中for/of,for/in 的详细介绍
Nov 17 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
PHP图片处理类 phpThumb参数用法介绍
2012/03/11 PHP
php超快高效率统计大文件行数
2015/07/05 PHP
PHP实现的迷你漂流瓶
2015/07/29 PHP
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
Thinkphp整合阿里云OSS图片上传实例代码
2019/04/28 PHP
javascript开发随笔二 动态加载js和文件
2011/11/25 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
2013/10/18 Javascript
JS实现跟随鼠标立体翻转图片的方法
2015/05/04 Javascript
TypeScript 中接口详解
2015/06/19 Javascript
JavaScript多线程详解
2015/08/12 Javascript
js基于cookie记录来宾姓名的方法
2016/07/19 Javascript
Nodejs基于LRU算法实现的缓存处理操作示例
2017/03/17 NodeJs
jquery实现图片上传前本地预览
2017/04/28 jQuery
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
深入理解JavaScript继承的多种方式和优缺点
2017/05/12 Javascript
基于JSON数据格式详解
2017/08/31 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
2018/01/26 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
2018/02/08 Javascript
解决vue props 拿不到值的问题
2018/09/11 Javascript
在vue中获取token,并将token写进header的方法
2018/09/26 Javascript
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
利用jqgrid实现上移下移单元格功能
2018/11/07 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
2020/02/13 Javascript
解决vant的Toast组件时提示not defined的问题
2020/11/11 Javascript
Python写的贪吃蛇游戏例子
2014/06/16 Python
如何使用Python 打印各种三角形
2019/06/28 Python
Python partial函数原理及用法解析
2019/12/11 Python
高中生活自我鉴定
2014/01/18 职场文书
单位成立周年感言
2014/01/26 职场文书
党校个人自我鉴定范文
2014/03/28 职场文书
信用社主任竞聘演讲稿
2014/05/23 职场文书
领导班子四风问题对照检查材料
2014/09/27 职场文书
三行辞职书范文
2015/02/26 职场文书
实习证明格式范文
2015/06/16 职场文书
四年级语文教学反思
2016/03/03 职场文书
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android