问题:使用“=”为数组赋值,赋值后打印数据有变化,但是页面不更新

原代码:

//data.是修改的数据,children是数组,为表格显示数据
this.data.children = []

设置后,在下一行打印,数据确实变成空数组了,但是页面还是不动~~~~

于是,找到了官方文档:链接在此

由于 JavaScript 的限制,Vue 不能检测以下数组的变动:

  1.当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue

  2.当你修改数组的长度时,例如:vm.items.length = newLength

举个例子:

var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果,同时也将在响应式系统内触发状态更新:

// Vue.set
Vue.set(vm.items, indexOfItem, newValue) // Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

你也可以使用 vm.$set 实例方法,该方法是全局方法 Vue.set 的一个别名:

vm.$set(vm.items, indexOfItem, newValue)

为了解决第二类问题,你可以使用 splice

vm.items.splice(newLength)

解决办法:用set代替直接赋值

 this.$set(data, 'children', []);

vue更改了数据但是视图却没有更新的更多相关文章

  1. vue修改对象属性值视图上没有更新

    data(){ return { obj:{ name:' ' } } } 方法一: this.$set(this.obj, 'name', '新的值'); 方法二; Vue.set(vm.obj, ...

  2. vue中修改了数据但视图无法更新的情况[转载]

    我们有时候常碰到vue中明明修改了数据,但是视图无法更新,因此我总结了一点点碰到此类的情况: 1.v-for遍历的数组,当数组内容使用的是arr[0].xx =xx更改数据,vue无法监测到 数组数据 ...

  3. vue中修改了数据但视图无法更新的情况

    数组数据变动:我们使用某些方法操作数组,变动数据时,有些方法无法被vue监测,有些可以 Vue包装了数个数组操作函数,使用这些方法操作的数组去,其数据变动时会被vue监测: push() pop() ...

  4. vue双向绑定(数据劫持+发布者-订阅者模式)

    参考文献:https://www.cnblogs.com/libin-1/p/6893712.html 实现mvvm主要包含两个方面,数据变化更新视图,视图变化更新数据. 关键点在于data如何更新v ...

  5. 解决vue中对象属性改变视图不更新的问题

    在使用VUE的过程中,会遇到这样一种情况, vue data 中的数据更新后,视图没有自动更新. 这个情况一般分为两种, 一种是数组的值改变,在改变数组的值的是时候使用索引值去更改某一项,这样视图不会 ...

  6. 利用object.defineProperty实现数据与视图绑定

    如今比较火的mvvm框架,例如vue就是利用es5的defineProperty来实现数据与视图绑定的,下面我来介绍一下defineProperty的用法. var people= {} Object ...

  7. Vue之九数据劫持实现MVVM的数据双向绑定

    vue是通过数据劫持的方式来做数据绑定的,其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持,达到监听数据变动的目的. 如果不熟悉defineProperty,猛 ...

  8. 从Object.definedProperty中看vue的双向数据的绑定

    前言 Object.defineProperty是ES5中的方法,它可以直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象.vue.js正式利用这种方法实现数据的双向绑定,以 ...

  9. vue中对象属性改变视图不更新问题

    常规情况下我们在vue实例的data中设置响应数据.但当数据为对象,我们增加或删除对象属性值时,视图并不触发更新,如何解决这个问题呢? let vm = new Vue{ el: '#app', da ...

随机推荐

  1. 《实战Java高并发程序设计》读书笔记

    文章目录 第二章 Java并行程序基础 2.1 线程的基本操作 2.1.1 线程中断 2.1.2 等待(wait)和通知(notify) 2.1.3 等待线程结束(join)和谦让(yield) 2. ...

  2. 汇编入门三-CPU工作原理

    本文为读书笔记,个人总结与摘抄自<汇编语言 第二版> 1.CPU从内存中读取数据,首先要获得存储单元的地址. 2.指明进行的操作,如存储或者读写 所以,CPU要进行操作总结为: 1.存储单 ...

  3. apache出现forbidden

    <Directory /> Options FollowSymLinks AllowOverride All Order deny,allow allow from all Require ...

  4. php函数引用

    //在自定义函数中,前面加一个&符号,是对返回静态变量的引用 function &test(){ static $a; $a += 1; echo $a; return $a; } / ...

  5. Spark2.4.0源码——DAGScheduler

    前言 Spark会将用户提交的作业看作一个job,在提交的时候首先将job转换为一系列的RDD,并按照RDD之间的依赖关系构建DAG(有向无环图),DAGScheduler会按照RDD依赖的不同将DA ...

  6. Salesforce Admin篇(一)Duplicate Management

    参考资料:https://help.salesforce.com/articleView?id=managing_duplicates_overview.htm Salesforce 很重要的一个平台 ...

  7. 安装R和Rstudio后,Rstudio出现空白和fatal error问题

    解决方法: 1.一定要以管理员方式启动Rstudio 2.只能安装一个R版本,之前安装的其他版本需要卸载干净 3.R和Rstudio需要安装在同一目录下

  8. BFS(三):双向广度优先搜索

    所谓双向广度搜索指的是搜索沿两个方向同时进行:(1)正向搜索:从初始结点向目标结点方向搜索:(2)逆向搜索:从目标结点向初始结点方向搜索:当两个方向的搜索生成同一子结点时终止此搜索过程. 广度双向搜索 ...

  9. BZOJ 1085:[SCOI2005]骑士精神(A*算法)

    题目链接 题意 中文题意. 思路 首先找到空白的格子,因为空白的格子可以和其他的骑士换.从空白的点开始搜索,每次和其他点交换.因为最多只有十五步,可以做16次搜索,搜索的时候,记录走过的步数和至少剩余 ...

  10. java接口自动化(一) - 接口自动化测试整体认知 - 开山篇(超详解)

    简介 了解什么是接口和为什么要做接口测试.并且知道接口自动化测试应该学习哪些技术以及接口自动化测试的落地过程.其实这些基本上在python接口自动化的文章中已经详细的介绍过了,不清楚的可以过去看看.了 ...