// 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()的更多相关文章

  1. vue 中 命名视图的用法

    今天主要记录  vue中命名视图的用法 先奉上官网网址:https://router.vuejs.org/zh/guide/essentials/named-views.html 一般情况下,一个页面 ...

  2. Vue路由-命名视图实现经典布局

    Vue路由-命名视图实现经典布局 相关Html: <!DOCTYPE html> <html lang="en"> <head> <met ...

  3. VUE 数据更新 视图没有更新

    3.还有个小技巧 当数据已经更新了 但是视图没有更新的时候  比如 这里  视图并没有更新 说明aa这个方法中没有触发视图更新 只要这里面随便一个对象能触发更新 则所有的视图更新都会生效 在data中 ...

  4. VUE数据更新视图不更新的原因

    当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue当你修改数组的长度时,例如:vm.items.length = newLength 数组更新只能通过 ...

  5. vue 数组数据更新或者对象数据更新 但是页面没有同步问题

    1,使用set函数来设置数据. 2,你可以通过 $forceUpdate 来做这件事.在数据赋值之后 就直接调用 this.$forceUpdata()

  6. vue实现数据驱动视图原理

    一.什么是数据驱动 数据驱动是vuejs最大的特点.在vuejs中,所谓的数据驱动就是当数据发生变化的时候,用户界面发生相应的变化,开发者不需要手动的去修改dom. 比如说我们点击一个button,需 ...

  7. 8种Vue中数据更新了但页面没有更新的情况

    目录 1.Vue 无法检测实例被创建时不存在于 data 中的 属性 2. Vue 无法检测'对象属性'的添加或移除 3.Vue 不能检测利用数组索引直接修改一个数组项 4.Vue 不能监测直接修改数 ...

  8. Oracle-11g 中两库间物化视图的同步

    html,body { font-size: 15px } body { font-family: Helvetica, "Hiragino Sans GB", "微软雅 ...

  9. Object.defineproperty实现数据和视图的联动 ------是不是就是 Angular 模型和视图的同步的实现方式???

    参考:http://www.cnblogs.com/oceanxing/p/3938443.html https://developer.mozilla.org/zh-CN/docs/Web/Java ...

  10. 关于vue生命周期中的同步异步的理解

    在vue官网中介绍生命周期的图如下: 主要测试代码如下: 主要是测试前四个生命周期beforeCreate,created,beforeMount,mounted,里面同步和异步的执行顺序,其它的类似 ...

随机推荐

  1. Kafka教程(二)API开发-生产者、消费者、topic

    一.地址 1.实时更新的思维导图 https://www.mubucm.com/doc/4uqlpedefuj 2.图片 二.具体内容   5.producer生产者   demo   发送pro.s ...

  2. 【中间件】K8S-kubernetes

    一.概念 1.为什么使用k8s 生产型应用会涉及多个容器.这些容器必须跨多个服务器主机进行部署 可以构建跨多个容器的应用服务.跨集群调度.扩展这些容器,并长期持续管理这些容器的健康状况 在Docker ...

  3. 快速学会慢查询SQL排查

    转载请注明出处️ 作者:测试蔡坨坨 原文链接:caituotuo.top/c56bd0c5.html 你好,我是测试蔡坨坨. 在往期文章中,我们聊过数据库基础知识,可参考「数据库基础,看完这篇就够了! ...

  4. 监控Android(生成木马)

    生成木马: sudo su msfvenom --platform android -p android/meterpreter/reverse_tcp lhost=IP地址 lport=端口号 R ...

  5. uniapp解析后端返回的html标签

    <rich-text  :nodes="data.content"></rich-text>

  6. 网盘不限速下载器,全速下载,快过SVIP

    一.软件简介 该软件利用作者开通的SVIP下载文件到服务器,然后由服务器传送给客户端实现不限速下载,所有功能(下载文件夹.批量下载)基本都免费开放了,现在每天每个用户拥有免费的20G的流量可以使用,已 ...

  7. 通过Google Cloud Storage(GCS)管理Terraform的状态State

    管理Terraform状态文件的最佳方式是通过云端的统一的存储,如谷歌云就用GCS. 首先要创建一个Bucket: $ gsutil mb -p pkslow -l us-west1 -b on gs ...

  8. Odoo View 常用技巧

    隐藏Field <field name="currency_id" invisible="True"/> <field name=" ...

  9. 初始rust

    安装rust 访问rust 按照步骤操作即可,安装很慢,请耐心等待 安装成功之后,请注意在命令行测试 rustc --version,cargo --version看看输出版本信息是否正常,如果不正常 ...

  10. 使用 NineData 实现备份集的实时查询

    使用 NineData 实现备份集的实时查询 背景信息 数据作为一家公司的重要资产,其重要程度不言而喻.数据库为数据提供存取服务,担任着重要的角色,如果因数据误删.服务器故障.病毒入侵等原因导致数据丢 ...