vue的数据更新视图不同步的处理用Vue.$set()
// vue的数据更新视图不同步的处理用Vue.$set()
// 通过Vue.set方法设置data属性vm.$set(最终值,数组索引,数组值) ==Vue.$set(arr,index,val)
vm.$set(self.newSelectArr,self.currIndex,self.currId);
Vue.set(this.item,"checked",false);//全局定义 //this.$set(this.item,"checked",false);//局部定义
一、在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去;
向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 ,需要用vue内置的方法
二、Vue.set() 响应式新增与修改数据
此时我们需要知道Vue.set()需要哪些参数,官方API:https://cn.vuejs.org/v2/api/#Vue-set
调用方法:Vue.set( target, key, value ) 或者 this.$set(target, key, value);
target:要更改的数据源(可以是对象或者数组)
key:要更改的具体数据
value :重新赋的值,
调用:this.$set(target, key, value);
方法二:
this.$forceUpdate(); 在第一行加上 除自定义属性外都可以实时更新
vue的数据更新视图不同步的处理用Vue.$set()的更多相关文章
- vue 中 命名视图的用法
今天主要记录 vue中命名视图的用法 先奉上官网网址:https://router.vuejs.org/zh/guide/essentials/named-views.html 一般情况下,一个页面 ...
- Vue路由-命名视图实现经典布局
Vue路由-命名视图实现经典布局 相关Html: <!DOCTYPE html> <html lang="en"> <head> <met ...
- VUE 数据更新 视图没有更新
3.还有个小技巧 当数据已经更新了 但是视图没有更新的时候 比如 这里 视图并没有更新 说明aa这个方法中没有触发视图更新 只要这里面随便一个对象能触发更新 则所有的视图更新都会生效 在data中 ...
- VUE数据更新视图不更新的原因
当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue当你修改数组的长度时,例如:vm.items.length = newLength 数组更新只能通过 ...
- vue 数组数据更新或者对象数据更新 但是页面没有同步问题
1,使用set函数来设置数据. 2,你可以通过 $forceUpdate 来做这件事.在数据赋值之后 就直接调用 this.$forceUpdata()
- vue实现数据驱动视图原理
一.什么是数据驱动 数据驱动是vuejs最大的特点.在vuejs中,所谓的数据驱动就是当数据发生变化的时候,用户界面发生相应的变化,开发者不需要手动的去修改dom. 比如说我们点击一个button,需 ...
- 8种Vue中数据更新了但页面没有更新的情况
目录 1.Vue 无法检测实例被创建时不存在于 data 中的 属性 2. Vue 无法检测'对象属性'的添加或移除 3.Vue 不能检测利用数组索引直接修改一个数组项 4.Vue 不能监测直接修改数 ...
- Oracle-11g 中两库间物化视图的同步
html,body { font-size: 15px } body { font-family: Helvetica, "Hiragino Sans GB", "微软雅 ...
- Object.defineproperty实现数据和视图的联动 ------是不是就是 Angular 模型和视图的同步的实现方式???
参考:http://www.cnblogs.com/oceanxing/p/3938443.html https://developer.mozilla.org/zh-CN/docs/Web/Java ...
- 关于vue生命周期中的同步异步的理解
在vue官网中介绍生命周期的图如下: 主要测试代码如下: 主要是测试前四个生命周期beforeCreate,created,beforeMount,mounted,里面同步和异步的执行顺序,其它的类似 ...
随机推荐
- Map的遍历方式,常用的key-value遍历方式
在开发过程中经常会遇到 map 的遍历,本文将会介绍四种常用的 key-value 遍历方式 说明: 增强 for 循环遍历 先取出 map 的 keySet,进行遍历,再取出对应 key 的 val ...
- 解决笔记本安装centos7后无法调节屏幕亮度
起因:本人有台老古董笔记本,大约是10年前左右了,三星rv411,配置较低无法安装win7以上的系统.装个CentOS7正好可以拿来学习Linux系统. 但是遇到一个特别恶心的情况,笔记本上调节屏幕亮 ...
- C# 11新特性之file关键字
C#11 添加了文件作用域类型功能:一个新的 file 修饰符,可以应用于任何类型定义以限制其只能在当前文件中使用.这样,我们可以在一个项目中拥有多个同名的类. 目录 示例 file不可以与其他修饰符 ...
- uni框架引入外部图标
说明 在使用uni框架的uni-nav-bar自定义导航栏的时候我想要引用外部的图标,但是似乎这个好像只能引入uni框架内置的图标 所以我只能把uni的图标进行增加处理,这样引入图标的方式就和正常的引 ...
- 微服务11:熔断、降级的Hystrix实现(附源码)
微服务1:微服务及其演进史 微服务2:微服务全景架构 微服务3:微服务拆分策略 微服务4:服务注册与发现 微服务5:服务注册与发现(实践篇) 微服务6:通信之网关 微服务7:通信之RPC 微服务8:通 ...
- js 非空判断
是否为 null 是否为 "" 是否为空字符串(引号中间有空格) 如: " ". 制表符.换行符.换页符和回车 一. 字符串 1. if(str == ...
- 【转载】EXCEL VBA 关于范围选择代码集
Range("A1:B2").Select '选中"A1"."A2"."B1"."B2"四个连续的单 ...
- nacos注册中心单节点ap架构源码解析
一.注册流程 单nacos节点流程图如下: 流程图可以知,Nacos注册流程包括客户端的服务注册.服务实例列表拉取.定时心跳任务:以及服务端的定时检查服务实例任务.服务实例更新推送5个功能. 服务注册 ...
- M.2 SSD固态硬盘上安装windows问题
近来M2硬盘大降价,笔记就趁便宜买了一个2T的M.2固态硬盘,插在笔记本上,接下来安装win11,本想以前安装多次,也是老手了,没想到遇到很多问题,一度陷入僵局,不过最终还是安装成功了,下面记录下安装 ...
- python之路54 forms组件 渲染 展示 参数补充 modelform组件 django中间件
forms组件渲染标签 <p>forms组件渲染标签的方式1(封装程度高 扩展性差 主要用于本地测试):</p> {# {{ form_obj.as_p }}#} {# {{ ...