vue更改了数据但是视图却没有更新
问题:使用“=”为数组赋值,赋值后打印数据有变化,但是页面不更新
原代码:
//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更改了数据但是视图却没有更新的更多相关文章
- vue修改对象属性值视图上没有更新
data(){ return { obj:{ name:' ' } } } 方法一: this.$set(this.obj, 'name', '新的值'); 方法二; Vue.set(vm.obj, ...
- vue中修改了数据但视图无法更新的情况[转载]
我们有时候常碰到vue中明明修改了数据,但是视图无法更新,因此我总结了一点点碰到此类的情况: 1.v-for遍历的数组,当数组内容使用的是arr[0].xx =xx更改数据,vue无法监测到 数组数据 ...
- vue中修改了数据但视图无法更新的情况
数组数据变动:我们使用某些方法操作数组,变动数据时,有些方法无法被vue监测,有些可以 Vue包装了数个数组操作函数,使用这些方法操作的数组去,其数据变动时会被vue监测: push() pop() ...
- vue双向绑定(数据劫持+发布者-订阅者模式)
参考文献:https://www.cnblogs.com/libin-1/p/6893712.html 实现mvvm主要包含两个方面,数据变化更新视图,视图变化更新数据. 关键点在于data如何更新v ...
- 解决vue中对象属性改变视图不更新的问题
在使用VUE的过程中,会遇到这样一种情况, vue data 中的数据更新后,视图没有自动更新. 这个情况一般分为两种, 一种是数组的值改变,在改变数组的值的是时候使用索引值去更改某一项,这样视图不会 ...
- 利用object.defineProperty实现数据与视图绑定
如今比较火的mvvm框架,例如vue就是利用es5的defineProperty来实现数据与视图绑定的,下面我来介绍一下defineProperty的用法. var people= {} Object ...
- Vue之九数据劫持实现MVVM的数据双向绑定
vue是通过数据劫持的方式来做数据绑定的,其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持,达到监听数据变动的目的. 如果不熟悉defineProperty,猛 ...
- 从Object.definedProperty中看vue的双向数据的绑定
前言 Object.defineProperty是ES5中的方法,它可以直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象.vue.js正式利用这种方法实现数据的双向绑定,以 ...
- vue中对象属性改变视图不更新问题
常规情况下我们在vue实例的data中设置响应数据.但当数据为对象,我们增加或删除对象属性值时,视图并不触发更新,如何解决这个问题呢? let vm = new Vue{ el: '#app', da ...
随机推荐
- F#周报2019年第26期
新闻 逐渐演化的.NET Core框架 Visual Studio提示与技巧 Windows Termina(预览) Microsoft在GitHub上的工程师从2000名增加至25000名 视频及幻 ...
- .NET Core IdentityServer4实战 第Ⅳ章-集成密码登陆模式
回顾下ClientCredentials模式,在ReSourceApi中定义了我们公开服务,第三方网站想要去访问ReSourceApi则需要在身份验证服务中获取toekn,根据token的内容,硬编码 ...
- iOS App开发的那些事儿2:如何搭建合适的框架
<iOS App开发的那些事儿>系列文章从更宏观的角度出发,不仅仅局限于具体某个功能.界面的实现,而是结合网易云信iOS端研发负责人多年的经验,从如何优化现有代码的角度出发,深度分析如何创 ...
- 微信小程序地图开发总结
最近在做一个微信小程序地图插件,通过传入起始位置名称和经纬度信息,就可以跳转到路线规划插件页面中,在该页面中,可以根据起始位置查询自驾,公共交通,步行等方式的路线信息,并且在地图上显示路线信息,在这个 ...
- CSS中浮动的使用
CSS有两个性质 第一个是 :继承性 第二个是:层叠性: 选择器的一种选择能力,谁的权重大就选谁 { 里面分两种情况: 分别是 选中和没选中. 1.选不中的情况下,走继承性,(font,color,t ...
- JS处理时间戳、前台拿到日期时间戳,时间戳转日期格式
今晚做分页的时候,遇到后台往前台传日期类型,会出现这种情况,好像是微软为了解决操作系统兼容性问题,将日期全部转换为从1970年1月1日至现在时间的时间戳.为了解决这个问题,特意百度了一番,整理了处理日 ...
- redis整合springboot的helloworld
引入依赖 compile 'org.springframework.boot:spring-boot-starter-data-redis' 使用redis有两种方法 1.Jedis Jedis je ...
- Html自动播放音乐代码
<audio id="bgmMusic" src="demo.mp3" autoplay="autoplay" loop=" ...
- Tensorflow教程(1)Tensorflow的下载和安装
人工智能已经成为了目前的大趋势,作为程序员的我们也应该跟着时代进步.Tensorflow作为人工智能领域的重要工具,被广泛的使用在机器学习的应用当中. Tensorflow使用人数众多.社区完善,所以 ...
- kubernetes安装部署-day01
一.基础环境的准备: 1.1.安装docker: docker的官网是:https://www.docker.com/ 1.1.1.rpm包安装: 官方下载地址:https://download.do ...