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>,通过总体来看,好像大家对这一块不是很 ...
随机推荐
- py基础之无序列表
'''dic是一个可以将两个相关变量关联起来的集合,格式是dd={key1:value1,key2:value2,key3:value3}'''d = { 'adam':95, 'lisa':85, ...
- 通过HTML及CSS模拟报纸排版总结
任务目的 深入掌握CSS中的字体.背景.颜色等属性的设置 进一步练习CSS布局 任务描述 参考 PDS设计稿(点击下载),实现页面开发,要求实现效果与 样例(点击查看) 基本一致 页面中的各字体大小, ...
- 零基础HTML及CSS编码总结
任务目的 针对设计稿样式进行合理的HTML架构,包括以下但不限于: * 掌握常用HTML标签的含义.用法 能够基于设计稿来合理规划HTML文档结构 理解语义化,合理地使用HTML标签来构建页面 掌握基 ...
- Dubbo 入门-细说分布式与集群
什么是Dubbo Dubbo是一款高性能.轻量级的开源Java RPC框架,它提供了三大核心能力:面向接口的远程方法调用,智能容错和负载均衡,以及服务自动注册和发现. 什么是RPC RPC全称(Rem ...
- EF多租户实例:如何快速实现和同时支持多个DbContext
前言 上一篇随笔我们谈到了多租户模式,通过多租户模式的演化的例子.大致归纳和总结了几种模式的表现形式. 并且顺带提到了读写分离. 通过好几次的代码调整,使得这个库更加通用.今天我们聊聊怎么通过该类库快 ...
- IntelliJ IDEA 2018.3 x64的破解和安装
IntelliJ IDEA 2018.3 x64的破解和安装 前言 IntelliJ IDEA 作为一个优秀的Java开发环境,深受许多开发者喜爱,但是它的价格却贵得让人无法接受,这篇文章将介绍永久激 ...
- 【JDK】JDK源码分析-Semaphore
概述 Semaphore 是并发包中的一个工具类,可理解为信号量.通常可以作为限流器使用,即限制访问某个资源的线程个数,比如用于限制连接池的连接数. 打个通俗的比方,可以把 Semaphore 理解为 ...
- String的那些事
目录 String的特点? String的构造方法? String的常用方法? String的特点? 通过查看String类的源码我们得知:String类被final关键字修饰,这即是说明String ...
- C语言格式化输出
1.%d 十进制有符号整数int. 2.%u 十进制无符号整数. 3.%ld 输出long整数 . 4.%s 字符串. 5.%c 单个字符. 6.%p 指针的值. 7.%e 指数形式的浮点数. 8.% ...
- vscode 新建 springboot java项目
vscode 新建 springboot java项目 1. 安装javaJDK 软件下载 下载地址: https://www.oracle.com/technetwork/java/javase/d ...