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>,通过总体来看,好像大家对这一块不是很 ...
随机推荐
- 【前端】这可能是你看过最全的css居中解决方案了~
1.水平居中:行内元素解决方案 适用元素:文字,链接,及其其它inline或者inline-*类型元素(inline-block,inline-table,inline-flex) html部分代码: ...
- 最适合初学者的一篇 Ribbon 教程
什么是 Ribbon Ribbon 是一个基于 HTTP 和 TCP 的 客服端负载均衡工具,它是基于 Netflix Ribbon 实现的. 它不像 Spring Cloud 服务注册中心.配置中心 ...
- AOP和spring AOP学习记录
AOP基本概念的理解 面向切面AOP主要是在编译期或运行时,对程序进行织入,实现代理, 对原代码毫无侵入性,不破坏主要业务逻辑,减少程序的耦合度. 主要应用范围: 日志记录,性能统计,安全控制,事务处 ...
- Distance function for sqlite
Distance function for sqlite Posted on October 25, 2008 by Dave As part of an iPhone SDK project, I ...
- 编写程序实现根据考试成绩将成绩分为A,B,C,D四档。
score = float(input("请输入你的成绩:"))if 90 <= score <= 100: print("你的成绩为A档")eli ...
- 一起了解 .Net Foundation 项目 No.19
.Net 基金会中包含有很多优秀的项目,今天就和笔者一起了解一下其中的一些优秀作品吧. 中文介绍 中文介绍内容翻译自英文介绍,主要采用意译.如与原文存在出入,请以原文为准. Salesforce To ...
- 自定义添加$_SERVER中的变量
如何根据自己项目中的需求自定义$_SERVER中的变量呢?比如$_SERVER['XU_TEXT_PARAM'],这个超全局变量输出肯定是会报错的.那如何自定义它,让它输出我们想要输出的值呢? 1.在 ...
- python3:input() 函数
一.知识介绍: 1.input() 函数,接收任意输入,将所有输入默认为字符串处理,并返回字符串类型: 2.可以用作文本输入,如用户名,密码框的值输入: 3.语法:input("提示信息:& ...
- JetBrains Quest 3
起因 今天早上看了一篇博文: 此时的我:"哎,这等好事不等我!" 然后......我打开官方推特: "什么?最后的任务?" 于是就有了这篇文章 开始操作 1.神 ...
- 【转】分布式架构的演进(JavaWeb)
作者:李小翀 链接:https://www.zhihu.com/question/22764869/answer/31277656 来源:知乎 1.初始 初始阶段 的小型系统 应用程序.数据库.文件等 ...