在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 也不能跟新视图情况的更多相关文章

  1. Vue2.0 【第二季】第3节 Vue.set全局操作

    目录 Vue2.0 [第二季]第3节 Vue.set全局操作 第3节:Vue.set全局操作 一.引用构造器外部数据 二.在外部改变数据的三种方法: 三.为什么要有Vue.set的存在? Vue2.0 ...

  2. vue2.0中,由于页面完成之后dom还未加载完成如何进行操作

    再vue中,当页面加载完成以后,dom还没有加载,是无法获取进行操作的,但是在vue2.0中提供了一个方法:this.$nextTick,在这个回调函数里面写dom操作即可: 如下代码: create ...

  3. PHP 数组转json_encode,单个数组下标为了0时不对??

    在 php 数组转json时,假如 有一个数组下标是顺序的,他json_encode后会直接变成一个简版二维json, $arr = ['1'=>1,'2'=>2]; echo (json ...

  4. 使用vue2.0 vue-router vuex 模拟ios7操作

    其实你也可以,甚至做得更好... 首先看一下效果:用vue2.0实现SPA:模拟ios7操作 与 通讯录实现 github地址是:https://github.com/QRL909109/ios7 如 ...

  5. 一些ES5的操作数组的方法

    在ES5规范中新增了不少操作数组的方法,特此罗列一下以备使用 1. forEach循环 有点类似jQuery的each循环 [12,23,36,4,5].forEach(function(v,k){ ...

  6. js创建及操作数组

    一:创建数组 1:使用Array构造函数(new可以省略): var colors = new Array();创建length值为20的的数组: var colors = new Array(20) ...

  7. 浅析vue2.0的diff算法

    一.前言 如果不了解virtual dom,要理解diff的过程是比较困难的. 虚拟dom对应的是真实dom, 使用document.CreateElement 和 document.CreateTe ...

  8. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║Vue基础:JS面向对象&字面量& this字

    缘起 书接上文<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史>,昨天咱们说到了以我的经历说明的web开发经历的 ...

  9. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十六 ║Vue基础:ES6初体验 & 模块化编程

    缘起 昨天说到了<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇:JS对象&字面量&this>,通过总体来看,好像大家对这一块不是很 ...

随机推荐

  1. 使用 Hexo 创建项目文档网站

    当我们发布一个开源项目的时候,最重要的事情之一就是要创建项目文档.对使用项目的用户来说,文档是非常有必要的,通常我们可以使用下面这些方式来创建文档: GitHub Wiki:在 Github 上我们可 ...

  2. 基于vue开发的在线付费课程应用

    最近在弄一个付费课程的应用,主要有微信登录,支付和自定义分享,在开发过程中遇到的坑,这里做一下记录 文章主要有以下几点 使用库简介 微信登录解决 微信支付解决 微信自定义分享解决 页面前进后退数据状态 ...

  3. 如何使用API提交转码任务?

    摘要: 当常规的转码工作流无法满足用户的场景时,需用户自己判断业务逻辑,并使用API提交转码任务.例如:并不是所有的视频都需要转码,不同视频需要设置不同的转码配置.本文将介绍API提交转码任务的方法. ...

  4. 使用HBuilder开发移动APP:ajax调用接口数据

    既然要做APP,与接口交互式少不了的,除非只是想做一个纯静态的APP.所以html5+的环境准备好后,我最先开始研究的就是如何与接口交互. 使用HBuilder新建示例教程后,里面会有一个ajax(网 ...

  5. 03 HDFS的客户端操作

    服务器和客户端的概念 hdfs的客户端有多种形式 1.网页形式 2.命令行形式 3.客户端在哪里运行,没有约束,只要运行客户端的机器能够跟hdfs集群联网 参数配置 文件的切块大小和存储的副本数量,都 ...

  6. 2.5D地图系统技术方案

    1.    2.5D地图概述 1.1.    概述 2.5维地图就是根据dem.dom.dlg等数据,以及真三维模型在一定高度.视角和灯光效果,按照轴侧投影的方式生成的地图.本文以臻图信息ZTMapE ...

  7. 6.前台项目vue环境、创建、目录重构、CSS、JS配置

    目录 前台 vue环境 创建项目 重构项目目录 文件修订:目录中非配置文件的多余文件可以移除 App.vue router/index.js Home.vue 全局配置:全局样式.配置文件 globa ...

  8. CentOS7采用tar.gz包方式安装Mysql5.7

    软件:VMware Linux版本:CentOS 7 一.安装mysql(采用tar.gz包安装Mysql5.7) 1.安装开发工具包 [root@localhost ~]# yum groups m ...

  9. 免费开源的 HelloDjango 系列教程,结束还是开始?

    作者:HelloGitHub-追梦人物 我们已经成功地开发了一个功能比较完备的个人博客,是时候来总结一下我们的工作了.博客系列完整的源代码地址: https://github.com/HelloGit ...

  10. Checkbox 勾上 不让勾下 同步手动刷新复选框状态 iview

    <Checkbox v-show="!disabledForm" ref="youwubianhuaRef" :value="youwubian ...