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>,通过总体来看,好像大家对这一块不是很 ...
随机推荐
- Java中文件上传路径与路径修改相关问题(tomcat8.0+eclipse)
1.普通文件上传的路径: 通过getRealPath获取相关路径 String photoFolder =request.getServletContext().getRealPath("u ...
- 『配置』服务器搭建 Office Online Server2016 实现文档预览
博主有话说:这个过程我遇到了很多错误,所以出了一个错误整理文章,所以当你在配置过程中遇到了问题,可以先去这篇文章里找找!加油! 先打开我吧:https://www.cnblogs.com/pukua/ ...
- ES6的Proxy
最近在Javascript的设计编程中,用到的那个单例模式,感觉就类似一种代理的思想[其实就是缓存的一种机制],单例模式就是: function getSingle(fn){ var result; ...
- 日常破解--从XCTF的app3题目简单了解安卓备份文件以及sqliteCipher加密数据库
一.题目来源 题目来源:XCTF app3题目 二.解题过程 1.下载好题目,下载完后发现是.ab后缀名的文件,如下图所示: 2.什么是.ab文件?.ab后缀名的文件是Andr ...
- 盘点Linux运维常用工具(二)-web篇之nginx
1.nginx的概述 .nginx是一个开源的.支持高性能.高并发的WWW服务和代理服务软件 .是由俄罗斯人Igor Sysoev开发的,具有高并发.占用系统资源少等特性 .官网:http://ngi ...
- seo搜索优化教程05-SEO常用专业术语
SEO常用的专业术语很多,星辉信息科技专门抽空进行了整理,主要如下:. SEO 根据搜索引擎规则来进行搜索引擎优化,进而使得在搜索结果中获得较好的排名 关键词 关键词也叫keywords,表示在搜索引 ...
- (转).balignl 16,0xdeadbeef浅析
原文地址:http://zqwt.012.blog.163.com/blog/static/12044684201031102956976/ 最近在分析u-boot的源代码,看到这一行: .balig ...
- C语言 变量初始化二进制、八进制、十六进制
int a1 = 10; //十进制 int a2 = 0b10; //二进制 int a3 = 010; //八进制 int a4 = 0x10; //十六进制 打印的结果:
- *fetch(_, { call, put }) { --- generator
effects: { *fetch(_, { call, put }) { const response = yield call(queryUsers); yield put({ type: 'sa ...
- 动态表单数据验证 vue
idCard: [{ validator: (rule, value, callback) => { if (this.idCardVif === 'idCard') { this.valida ...