vue2.0 操作数组下标不跟新ui,使用set()或$forceUpdate 也不能跟新视图情况
在vue 2.0 中操作数组不跟新ui图,即使使用set()或 $forceUpdate也不能跟新视图,我在前段时间也遇到了一个问题,当时我使用的时element 的tree 组件
由于需要对tree 的数组进行增删改查等操作,开始使用set操作数组时没什么问题的,但是,tree 的数组还需要整体更换第二次第三次数据,这时ui图就跟新了,想了很久想到了自己伪造一次$forceUpdate方法,代码如下
forceUpdate() {
// 除去第一个分类,其它分类内容不更新的hack方法
let temp = this.data //这里的data 就是tree 使用的数组,将data 数据clone 一份
this.data = [] //先将data 数组置为空
this.$nextTick(() => {
this.data = temp //等dom 更新后再将data 数组重新赋值原来的数据
this.$nextTick(() => {
this.addFileClass() //这里的是我添加了一些类在上面,可以不用管这行代码
})
})
},
在需要更新ui 的地方 调用 forceUpdate()这个方法就能实现伪造$forceUpdate 方法了,ui图也跟新了
vue2.0 操作数组下标不跟新ui,使用set()或$forceUpdate 也不能跟新视图情况的更多相关文章
- Vue2.0 【第二季】第3节 Vue.set全局操作
目录 Vue2.0 [第二季]第3节 Vue.set全局操作 第3节:Vue.set全局操作 一.引用构造器外部数据 二.在外部改变数据的三种方法: 三.为什么要有Vue.set的存在? Vue2.0 ...
- vue2.0中,由于页面完成之后dom还未加载完成如何进行操作
再vue中,当页面加载完成以后,dom还没有加载,是无法获取进行操作的,但是在vue2.0中提供了一个方法:this.$nextTick,在这个回调函数里面写dom操作即可: 如下代码: create ...
- PHP 数组转json_encode,单个数组下标为了0时不对??
在 php 数组转json时,假如 有一个数组下标是顺序的,他json_encode后会直接变成一个简版二维json, $arr = ['1'=>1,'2'=>2]; echo (json ...
- 使用vue2.0 vue-router vuex 模拟ios7操作
其实你也可以,甚至做得更好... 首先看一下效果:用vue2.0实现SPA:模拟ios7操作 与 通讯录实现 github地址是:https://github.com/QRL909109/ios7 如 ...
- 一些ES5的操作数组的方法
在ES5规范中新增了不少操作数组的方法,特此罗列一下以备使用 1. forEach循环 有点类似jQuery的each循环 [12,23,36,4,5].forEach(function(v,k){ ...
- js创建及操作数组
一:创建数组 1:使用Array构造函数(new可以省略): var colors = new Array();创建length值为20的的数组: var colors = new Array(20) ...
- 浅析vue2.0的diff算法
一.前言 如果不了解virtual dom,要理解diff的过程是比较困难的. 虚拟dom对应的是真实dom, 使用document.CreateElement 和 document.CreateTe ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║Vue基础:JS面向对象&字面量& this字
缘起 书接上文<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史>,昨天咱们说到了以我的经历说明的web开发经历的 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十六 ║Vue基础:ES6初体验 & 模块化编程
缘起 昨天说到了<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇:JS对象&字面量&this>,通过总体来看,好像大家对这一块不是很 ...
随机推荐
- Swfit 属性与汇编分析inout本质
今天将讲述Swift属性以及剖析inout的本质, 如有兴趣可点击关注,以后会定期更新更有料的博客!!! 一.属性 Swift中跟实例相关的属性可以分为2大类 存储属性(Stored property ...
- Feign 在 SpringCloud 中的使用 四
此处就单纯写一个消费者服务,通过Feign来调用生产者中的接口,生产者中的接口可以自己随便定义一个,前面博客中也有代码 1.导入springcloud Feign的jar包 <parent> ...
- Redis06——Redis到底能用在什么地方(上)
之前我们介绍了一些列关于Redis的数据结构.持久化.过期&淘汰策略.集群化等知识点,感兴趣的小伙伴可以在文章的末尾查看往期内容.今天将为大家带来Redis的应用.由于本篇文章较长,所以将拆分 ...
- 系统之眼!Linux系统性能监控工具Glances
一.Glances介绍 glances是一个基于python语言开发,可以为linux或者UNIX性能提供监视和分析性能数据的功能.glances在用户的终端上显示重要的系统信息,并动态的进行更新,让 ...
- LeetCode(不用加号的加法)
题目: 设计一个函数把两个数相加,不得使用+或者其他算数运算符. 示例: 输入:a=1,b=1 输出:2 提示: a,b均有可能是负数或0 结果不会溢出32位整数 初始思路: 看到题目我就明白只能用位 ...
- 数据库事务练习-Java(新手)
数据库事务: 一个数据库事务通常包含了一个序列的对数据库的读/写操作. 为数据库操作序列提供了一个从失败中恢复到正常状态的方法,同时提供了数据库即使在异常状态下仍能保持一致性的方法. p ...
- Natas15 Writeup(sql盲注之布尔盲注)
Natas15: 源码如下 /* CREATE TABLE `users` ( `username` varchar(64) DEFAULT NULL, `password` varchar(64) ...
- 云CRM和本地CRM哪个更好
现在CRM系统按照服务器部署方式的不同分为本地CRM和云CRM两种,本地CRM需要在企业内部部署服务器,而云CRM的服务器则是安装在云服务器上面,很多企业可能不知道应该选择云CRM还是本地CRM.下面 ...
- Arch Linux开启SSH远程安装(1.5)
现在你的眼前应该可以看到[root@archiso~]#的提示. 首先,建立目标机器的网络设置: 安装和升级软件包前,先让本地的包数据库和远程的软件仓库同步是个好习惯. [root@archiso~] ...
- [极客大挑战 2019]BabySQL 1
考点就是一系列的sql注入操作 和 replace函数过滤 进入页面如图 基础过滤测试 union .select .information_schema试试有没有被过滤 ?username=ad ...