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,里面同步和异步的执行顺序,其它的类似 ...
随机推荐
- 【Spark】Day01-入门、模块组成、4种运行模式详解及配置、案例实操(spark分析过程)
一.概述 1.概念 基于内存的大数据分析计算引擎 2.特点 快速.通用.可融合性 3.Spark内置模块[腾讯8000台spark集群] Spark运行在集群管理器(Cluster Manager)上 ...
- 《MySQL必知必会》之快速入门游标和触发器
第二十四章 使用游标 本章将介绍什么是游标以及如何使用游标 游标 之前的select语句检索出来的数据,没有办法得到第一行或者下一行 有时,需要在检索出来的行中前进或后退一行或多行.这就是使用游标的原 ...
- Python 什么是flask框架?快速入门(flask安装,登录,新手三件套,登录认证装饰器,配置文件,路由系统,CBV)
目录 一:Python flask框架 前言 补充一下,我们前面学习的库都是叫模块,那么框架与库的区别? 二:flask 框架概述 1.简介 2.须知: 3.flask框架的优势 三:flask 安装 ...
- 基于.NetCore开发博客项目 StarBlog - (21) 开始开发RESTFul接口
前言 最近电脑坏了,开源项目的进度也受到一些影响 这篇酝酿很久了,作为本系列第二部分(API接口开发)的第一篇,得想一个好的开头,想着想着就鸽了好久,索性不扯那么多了,直接开写吧~ 关于RESTFul ...
- 神奇的DEBUG:因为异常导致MongoDB容器无法启动
越来越多的项目使用docker进行环境搭建,统一了开发和运行环境,好处颇多.但同时也引入了许多复杂性,比如一些容器服务突然无法启动,那么debug起来就比物理机安装的服务麻烦一些. 这段时间Mac P ...
- [深度学习] Contractive Autoencoder
转载于DeepLearning: Contractive Autoencoder - dupuleng - 博客园 一.雅克比矩阵 雅克比矩阵是一阶偏导,假设(x1,x2,....,xn)到(y ...
- Codeforces Hello 2023 CF 1779 A~F 题解
点我看题 A. Hall of Fame 先把不用操作就合法的情况判掉.然后发现交换LL,RR,RL都是没用的,只有交换LR是有用的,这样可以照亮相邻的两个位置.所以我们就是要找到一个位置i,满足\( ...
- K8s 为什么会抛弃 docker
为什么 K8s 会抛弃 docker 前言 CRI containerd 参考 为什么 K8s 会抛弃 docker 前言 在这之前先来了解下,k8s 是如何和 docker 进行交互的. CRI k ...
- 腾讯出品小程序自动化测试框架【Minium】系列(一)环境搭建之第一个测试程序
一.什么是Minium? minium是为小程序专门开发的自动化框架,使用minium可以进行小程序UI自动化测试. 当然,它的能力不仅仅局限于UI自动化, 比如: 使用minium来进行函数的moc ...
- strapi系列--如何自定义非界面化的接口,定制化自己的业务逻辑
为什么要进行后端定制呢? 在实际开发过程中,项目中有些需求是不需要创建界面化接口的,需要我们定制化自己的业务逻辑,那么我们该如何处理这个需求呢?本文以图文并茂的形式,定制一个我们自己的业务逻辑接口. ...