VUE不能对新增属性监测更新
data () {
return {
data:{},
}
},
method:{
if(data.code==0){
this.loading = false;
this.data = data.data;
this.data.list.forEach(item =>{
item.selected = false;
})
checked(item){
if(item.selected){
item.selected = false
}else{
item.selected = true;
}
},
}
} <div class="item-wrap" v-for="item in data.list" :key="item.id" @click="checked(item)" :class="{selected: item.selected}"></div>
上面的代码view不能监测到selected的变化
解决方法
data.data.list.forEach(item =>{
item.selected = false;
})
this.data = data.data;
VUE官方解释
检测变化的注意事项
受现代 JavaScript 的限制 (以及废弃 Object.observe
),Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter
转化过程,所以属性必须在 data
对象上存在才能让 Vue 转换它,这样才能让它是响应的。例如:
var vm = new Vue({ |
Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)。然而它可以使用 Vue.set(object, key, value)
方法将响应属性添加到嵌套的对象上:
Vue.set(vm.someObject, 'b', 2) |
您还可以使用 vm.$set
实例方法,这也是全局 Vue.set
方法的别名:
this.$set(this.someObject,'b',2) |
有时你想向已有对象上添加一些属性,例如使用 Object.assign()
或 _.extend()
方法来添加属性。但是,添加到对象上的新属性不会触发更新。在这种情况下可以创建一个新的对象,让它包含原对象的属性和新的属性:
// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })` |
也有一些数组相关的问题,之前已经在列表渲染中讲过。
VUE不能对新增属性监测更新的更多相关文章
- 关于vue给对象新增属性页面不会动态更新
不知道大家有没有遇到过这个问题,当我们给data里边声明或者已经赋值过的对象或者数组,添加新的属性时,如果更新此属性的值是不会动态更新视图的. $set 看以下实例: 我们开始给drug_list追加 ...
- vue 后期追回的属性不更新视图问题
this.$set(this.problemList[index], 'sub', []) 因为原始数组是有set,get而追加的没有,所以需要用这种方式 // 添加 this.$set(th ...
- vue新增属性是否会响应式更新?
原文地址 在开发过程中,我们时常会遇到这样一种情况:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的. 根据官 ...
- Vue-给对象新增属性(使用Vue.$set())
在开发过程中,我们时常会遇到这样一种情况:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的. 根据官方文档定义 ...
- vue 数组中嵌套的对象添加新属性--页面更新
vue 数组中嵌套的对象添加新属性--页面更新:https://www.jianshu.com/p/8f0e5bb13735
- vue第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件)
第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件) #课程目标 掌握vue实例的相关属性和方法的含义和使用 了解vue的数据响应原理 熟悉创建组件,了解全局 ...
- Vue源码终笔-VNode更新与diff算法初探
写完这个就差不多了,准备干新项目了. 确实挺不擅长写东西,感觉都是罗列代码写点注释的感觉,这篇就简单阐述一下数据变动时DOM是如何更新的,主要讲解下其中的diff算法. 先来个正常的html模板: & ...
- Vue (二) --- Vue对象提供的属性功能
--------------------------------------------不是井里没有水,而是你挖的不够深. 3. Vue对象提供的属性功能 3.1 过滤器 过滤器,就是vue允许开发者 ...
- vue 对象提供的属性功能、通过axio请求数据(2)
1 Vue对象提供的属性功能 1.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 1.1.1 使用Vue.filter()进行全局定义(全局 ...
随机推荐
- [Codeforces 555E]Case of Computer Network(Tarjan求边-双连通分量+树上差分)
[Codeforces 555E]Case of Computer Network(Tarjan求边-双连通分量+树上差分) 题面 给出一个无向图,以及q条有向路径.问是否存在一种给边定向的方案,使得 ...
- 标签的增加、删除与复制,动态标签js不生效的解决
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- VS Code的使用
之前一直使用的是WebStorm来学习web前端开发,最近开始使用VSCode,很多方面和WebStorm不一样,需要一段时间适应,以下是我初次使用VSCode进行web前端开发学习所遇到的一些问题以 ...
- 基于GPU的图像处理平台
基于GPU的图像处理平台 1. (309)英伟达推Jetson TX1 GPU模块力推人工智能 1.1 产品概述 Jetson TX1 GPU模块,主要针对近年来蓬勃发展的人工智能市场,包括无人机. ...
- 北京太速科技有限公司 layout 事业部
涵盖领域设计能力 ·通信板卡:PCI/PCIE/CPCI/VPX/光通信/无线通信/射频雷达/显卡 1.最小线宽:2MIL·主板服务器:电脑主板/交换机/服 ...
- thinkphp在 nginx 的conf文件配置
server { listen 80; server_name www.osd-aisa.com; #charset koi8-r; #access_log logs/host.access.log ...
- HTML基础用 表格做报表
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- lambda表达式以及stream流式api用法
https://www.cnblogs.com/aoeiuv/p/5911692.html 这篇文章讲的简单全面,记录下 kotlin一些符号的用法 https://www.cnblogs.com/l ...
- find命令进阶(三):xargs
The xargs command performs an interesting function. It accepts input from standard input and convert ...
- spring-cloud:熔断监控Hystrix Dashboard和Turbine的示例
1.运行环境 开发工具:intellij idea JDK版本:1.8 项目管理工具:Maven 4.0.0 2.GITHUB地址 https://github.com/nbfujx/springCl ...