Vue 改变数组触发视图更新
最近给table做了一个点击排序的功能,数组更改以后发现data数据变了,但是视图不更新
写惯了js的我们随手一串代码
this.items[2]={message:"Change Test",id:'1'}
这样数据虽然发生改变,但是视图不会更新。
注意事项:
由于 JavaScript 的限制,Vue 不能检测以下变动的数组:
1.当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue
2.当你修改数组的长度时,例如:vm.items.length = newLength
VUE给出了方法:vue.set() ,或者写成 this.$set(ARR)
调用方法:Vue.set( target, key, value )
target:要更改的数据源(可以是对象或者数组)
key:要更改的具体数据
value :重新赋的值
现在的代码就可以写成
Vue.set( this.items, 2, {message:"Change Test",id:'1'} )
页面视图也会更新。
补充:
变异方法 (mutation method):
变异方法 (mutation method),顾名思义,会改变被这些方法调用的原始数组。相比之下,也有非变异 (non-mutating method) 方法,例如:filter(), concat() 和 slice() 。这些不会改变原始数组,但总是返回一个新数组。
1.push()
2.pop()
3.shift()
4.unshift()
5.splice()
6.sort()
7.reverse()
Vue 改变数组触发视图更新的更多相关文章
- problem:vue之数据变更没有触发视图更新问题
前言: 数据变更之后,vue如何渲染dom? 实际场景: 更新数据之后,再设置滚动条的位置为什么设置无效? 为什么将隐藏的元素设置为显示状态之后,读取元素状态读取不到? 改变了对象/数组中的值,页面没 ...
- Vue.set 向响应式对象中添加响应式属性,及设置数组元素触发视图更新
一.为什么需要使用Vue.set? vue中不能检测到数组和对象的两种变化: 1.数组长度的变化 vm.arr.length = 4 2.数组通过索引值修改内容 vm.arr[1] = ‘aa’ Vu ...
- vue数组对象修改触发视图更新
直接修改数组元素是无法触发视图更新的,如 this.array[0] = { name: 'meng', age: 22 } 修改array的length也无法触发视图更新,如 this.array. ...
- VUE 动态给对象增加属性,并触发视图更新。
在开发过程中,我们时常会遇到这样一种情况:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的. 根据官方文档定义 ...
- Vue 动态修改data 值 并触发视图更新
Vue 动态修改data 值 并触发视图更新 this.$set(obj, key, '') // Vue 动态修改或者添加data key 并触发视图更新
- Vue 改变数组中对象的属性不重新渲染View的解决方案
Vue 改变数组中对象的属性不重新渲染View的解决方案 在解决问题之前,我们先来了解下 vue响应性原理: Vue最显著的一个功能是响应系统-- 模型只是一个普通对象,修改对象则会更新视图.受到ja ...
- vue 改变数据DOM不更新,获取不到DOM的解决方法
1.获取不到DOM的解决方案(使用$nextTick) 定义:在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 理解:nextTick(),是将回调 ...
- problem: vue之数组元素中的数组类型值数据改变却无法在子组件视图更新问题
问题:给父组件上的一个数组中的某个元素中的数组类型值,添加值后,数据没有在子组件上更新. 对元素添加值之后,vue的数据其实已经更新了并传给了子组件,子组件中没有立即更新. 那么这里有个问题,在子组件 ...
- vue数组操作不更新视图问题
vue 观察数组的变异方法 更新视图 push() pop() shift() unshift() splice(i,n,arr) sort(xx) reverse() ex: app.book.pu ...
随机推荐
- Core data 如何查看ObjectId
ObjectId是Core Data 为每一个数据对象提供的唯一ID标识,获取ObjectID.并打印的方法如下: 步骤: 1. 获取ManagedObject 2. ManagedObject -& ...
- javac导出参考文档报错 错误: 编码GBK的不可映射字符”
- Matplotlib 教程
Matplotlib是python中最流行的数据绘图库,使用matplotlib,您可以绘制任何类型的图形. 本教程的目标是让您轻松学会使用matplotlib绘制复杂的图形. 预备知识 熟悉Pyth ...
- 获取QQ群中的所有群友QQ
package com.jm.mail.tools; import java.io.BufferedReader; import java.io.IOException; import java.io ...
- PE文件结构体-IMAGE_FILE_HEADER
struct _IMAGE_FILE_HEADER { WORD Machine; //运行平台 WORD NumberOfSections; //文件的区块数目 DWORD TimeDateStam ...
- vux 中 this.$vux.loading undefined 的问题
时间:2018-04-03 摘要:this.$vux.loading 报 undefined 今天在使用 事件触发 vux 的 loading 组件时,发现无法触发成功,显示 undefined 然 ...
- 三十二、CI框架之配置域名和设置默认登陆网站
一.打开routes.php文件,将$route['default_controller'] = 'login'; 修改成我们需要的内容. 二.修改config.php中的base_url数据 三.L ...
- Linux学习《第五章 用户身份与文件权限》
- Makefile入门1
Linux中的编译脚本Makefile的讲解设计 概念 编译控制脚本(.c.h----->bin) Makefile最终要的是清晰编译链接的整个过程 Makefile的优化设计 工作原理 mak ...
- P1001 害死人不偿命的(3n+1)猜想 (Basic Level)
转跳点: