最近给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 改变数组触发视图更新的更多相关文章

  1. problem:vue之数据变更没有触发视图更新问题

    前言: 数据变更之后,vue如何渲染dom? 实际场景: 更新数据之后,再设置滚动条的位置为什么设置无效? 为什么将隐藏的元素设置为显示状态之后,读取元素状态读取不到? 改变了对象/数组中的值,页面没 ...

  2. Vue.set 向响应式对象中添加响应式属性,及设置数组元素触发视图更新

    一.为什么需要使用Vue.set? vue中不能检测到数组和对象的两种变化: 1.数组长度的变化 vm.arr.length = 4 2.数组通过索引值修改内容 vm.arr[1] = ‘aa’ Vu ...

  3. vue数组对象修改触发视图更新

    直接修改数组元素是无法触发视图更新的,如 this.array[0] = { name: 'meng', age: 22 } 修改array的length也无法触发视图更新,如 this.array. ...

  4. VUE 动态给对象增加属性,并触发视图更新。

    在开发过程中,我们时常会遇到这样一种情况:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的. 根据官方文档定义 ...

  5. Vue 动态修改data 值 并触发视图更新

    Vue 动态修改data 值 并触发视图更新 this.$set(obj, key, '') // Vue 动态修改或者添加data key 并触发视图更新

  6. Vue 改变数组中对象的属性不重新渲染View的解决方案

    Vue 改变数组中对象的属性不重新渲染View的解决方案 在解决问题之前,我们先来了解下 vue响应性原理: Vue最显著的一个功能是响应系统-- 模型只是一个普通对象,修改对象则会更新视图.受到ja ...

  7. vue 改变数据DOM不更新,获取不到DOM的解决方法

    1.获取不到DOM的解决方案(使用$nextTick) 定义:在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 理解:nextTick(),是将回调 ...

  8. problem: vue之数组元素中的数组类型值数据改变却无法在子组件视图更新问题

    问题:给父组件上的一个数组中的某个元素中的数组类型值,添加值后,数据没有在子组件上更新. 对元素添加值之后,vue的数据其实已经更新了并传给了子组件,子组件中没有立即更新. 那么这里有个问题,在子组件 ...

  9. vue数组操作不更新视图问题

    vue 观察数组的变异方法 更新视图 push() pop() shift() unshift() splice(i,n,arr) sort(xx) reverse() ex: app.book.pu ...

随机推荐

  1. Core data 如何查看ObjectId

    ObjectId是Core Data 为每一个数据对象提供的唯一ID标识,获取ObjectID.并打印的方法如下: 步骤: 1. 获取ManagedObject 2. ManagedObject -& ...

  2. javac导出参考文档报错 错误: 编码GBK的不可映射字符”

  3. Matplotlib 教程

    Matplotlib是python中最流行的数据绘图库,使用matplotlib,您可以绘制任何类型的图形. 本教程的目标是让您轻松学会使用matplotlib绘制复杂的图形. 预备知识 熟悉Pyth ...

  4. 获取QQ群中的所有群友QQ

    package com.jm.mail.tools; import java.io.BufferedReader; import java.io.IOException; import java.io ...

  5. PE文件结构体-IMAGE_FILE_HEADER

    struct _IMAGE_FILE_HEADER { WORD Machine; //运行平台 WORD NumberOfSections; //文件的区块数目 DWORD TimeDateStam ...

  6. vux 中 this.$vux.loading undefined 的问题

    时间:2018-04-03 摘要:this.$vux.loading 报 undefined 今天在使用 事件触发 vux 的 loading  组件时,发现无法触发成功,显示 undefined 然 ...

  7. 三十二、CI框架之配置域名和设置默认登陆网站

    一.打开routes.php文件,将$route['default_controller'] = 'login'; 修改成我们需要的内容. 二.修改config.php中的base_url数据 三.L ...

  8. Linux学习《第五章 用户身份与文件权限》

  9. Makefile入门1

    Linux中的编译脚本Makefile的讲解设计 概念 编译控制脚本(.c.h----->bin) Makefile最终要的是清晰编译链接的整个过程 Makefile的优化设计 工作原理 mak ...

  10. P1001 害死人不偿命的(3n+1)猜想 (Basic Level)

    转跳点: