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 相关文章推荐
dwr spring的集成实现代码
Mar 22 Javascript
js 模拟实现类似c#下的hashtable的简单功能代码
Jan 24 Javascript
11款新鲜的jQuery插件[附所有demo下载]
Jan 24 Javascript
jQuery获取iframe的document对象的方法
Oct 10 Javascript
Javascript中的数据类型之旅
Oct 18 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
Jan 31 Javascript
微信小程序之前台循环数据绑定
Aug 18 Javascript
JavaScript简单实现合并两个Json对象的方法示例
Oct 16 Javascript
JS 验证码功能的三种实现方式
Nov 26 Javascript
小程序hover-class点击态效果实现
Feb 26 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
Apr 29 Javascript
ant design vue 表格table 默认勾选几项的操作
Oct 31 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
15个小时----从修改程序到自己些程序
2006/10/09 PHP
php daodb插入、更新与删除数据
2009/03/19 PHP
php实现删除指定目录下相关文件的方法
2014/10/20 PHP
PHP自定义递归函数实现数组转JSON功能【支持GBK编码】
2018/07/17 PHP
PHP实现负载均衡session共享redis缓存操作示例
2018/08/22 PHP
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
javascript获取form里的表单元素的示例代码
2014/02/14 Javascript
js查找节点的方法小结
2015/01/13 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
2015/04/10 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
2015/08/22 Javascript
详解JavaScript UTC时间转换方法
2016/01/07 Javascript
利用C/C++编写node.js原生模块的方法教程
2017/07/07 Javascript
JavaScript 用fetch 实现异步下载文件功能
2017/07/21 Javascript
vue组件三大核心概念图文详解
2019/05/30 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
Vue 中使用 typescript的方法详解
2020/02/17 Javascript
Python实现的二维码生成小软件
2014/07/11 Python
朴素贝叶斯分类算法原理与Python实现与使用方法案例
2018/06/26 Python
Python类装饰器实现方法详解
2018/12/21 Python
numpy数组做图片拼接的实现(concatenate、vstack、hstack)
2019/11/08 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
python与c语言的语法有哪些不一样的
2020/09/13 Python
python连接手机自动搜集蚂蚁森林能量的实现代码
2021/02/24 Python
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
美国沙龙美发产品购物网站:Hair.com by L’Oreal
2020/11/09 全球购物
天网面试题
2013/04/07 面试题
解决方案设计综合面试题
2015/08/31 面试题
班组长工作职责
2013/12/25 职场文书
农业资源与环境专业自荐信范文
2013/12/30 职场文书
银行招聘自荐信
2015/03/06 职场文书
2016七夕情人节感言
2015/12/09 职场文书
如何将numpy二维数组中的np.nan值替换为指定的值
2021/05/14 Python
Python 如何将integer转化为罗马数(3999以内)
2021/06/05 Python
Go语言空白表示符_的实例用法
2021/07/04 Golang