原文链接:http://www.cnblogs.com/sufubo/p/6906261.html#undefined

问题:在vue项目中,我更改数组中的某一条数据,直接arr[i]=newVal ,发现页面上数组没有实时刷新;

查看官网发现:

由于 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(example1.items, indexOfItem, newValue)
// Array.prototype.splice`
example1.items.splice(indexOfItem, 1, newValue)
example1.items.splice(newLength)

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

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

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

vm.items.splice(newLength)

官网链接:https://cn.vuejs.org/v2/guide/list.html#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8B

相关链接:http://www.cnblogs.com/sufubo/p/6906261.html#undefined

vue数组中数据变化但是视图没有更新解决方案的更多相关文章

  1. vue响应式数据变化

    vue响应式数据变化 话不多说,先上代码: //拷贝一份数组原型,防止修改所有数组类型变量的原型方法 let arrayProto = Array.prototype;// 数组原型上的方法 let ...

  2. vue 数据改变但是视图没更新

    在使用过程中会出现数据改变但是视图没有更新的情况(类型数组或者对象),这里我们就需要用到 $set 如果是对象类型: this.$set(this.userInfo, 'name', 'gionlee ...

  3. vue 数组中嵌套的对象添加新属性--页面更新

    vue 数组中嵌套的对象添加新属性--页面更新:https://www.jianshu.com/p/8f0e5bb13735

  4. vue修改elementUI的分页组件视图没更新问题

    转: vue修改elementUI的分页组件视图没更新问题 今天遇到一个小问题平时没留意,el-pagination这个分页组件有一个属性是current-page当前页.今天想在methods里面手 ...

  5. vue 在使用数组的时候,数组内部数据发生变化,视图却没有改变

    data(){ return{ todos: [ {name: 'aa', age: 22}, {name: 'bb', age: 23} ] } } methods:{ changeTodos(){ ...

  6. vue子组件数据变化同步到父组件中

    方法:通过watch监听子组件数据变化 1.父组件中注册方法 <Child @getChildValue="getChildValue"></Child> ...

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

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

  8. 当From窗体中数据变化时,使用代码获取数据库中的数据然后加入combobox中并且从数据库中取得最后的结果

    private void FormLug_Load(object sender, EventArgs e) { FieldListLug.Clear();//字段清除 DI = double.Pars ...

  9. MS SQL Server中数据表、视图、函数/方法、存储过程是否存在判断及创建

    前言 在操作数据库的时候经常会用到判断数据表.视图.函数/方法.存储过程是否存在,若存在,则需要删除后再重新创建.以下是MS SQL Server中的示例代码. 数据表(Table) 创建数据表的时候 ...

随机推荐

  1. js的深拷贝的理解和实现

    一:什么是深拷贝? 举例:a=b,正常情况下当改变a时b也改变,当改变a时b第一层不改变copy就是浅拷贝,当改变a时b底基层都不会改变就是深拷贝 二:实现深拷贝 1.最简单方法就是使用JSON.st ...

  2. Jmeter配置联机负载生成密钥失败的问题解决

    在配置负载联机时, 控制机上需要生成密钥供负载机使用. 在bin目录下双击create-rmi-keystore.bat时, 弹出错误提示: 'XXXX'不是内部或外部命令, 这种典型的错误一看就环境 ...

  3. 两个input之间有空隙,处理方法

    修改css,给前边一个input添加一个左浮动.   <input id="day" type="button" value="日" ...

  4. echarts.js导致angular-translate加载模块失败

    echarts.js导致angular-translate加载模块失败,待解决

  5. 史上最全最详细JNDI数据源配置说明

    转: 史上最全最详细JNDI数据源配置说明 2017年08月05日 17:12:08 万米高空 阅读数 23983   版权声明:本文为博主原创文章,转载请注明出处,尊重劳动成果,谢谢~ https: ...

  6. JAVA 基础编程练习题16 【程序 16 输入 9*9 表】

    16 [程序 16 输入 9*9 表] 题目:输出 9*9 口诀. 程序分析:分行与列考虑,共 9 行 9 列,i 控制行,j 控制列. package cskaoyan; public class ...

  7. Java泛型(11):潜在类型机制

    泛型的目标之一就是能够编写尽可能广泛应用的代码. 为了实现这一点,我们需要各种途径来放松对我们的代码将要作用的类型所做的限制,同时不丢失静态类型检查的好处.即写出更加泛化的代码. Java泛型看起来是 ...

  8. SpringBoot: 9.整合thymeleaf(转)

    1.创建maven项目,添加项目所需依赖 <!--springboot项目依赖的父项目--> <parent> <groupId>org.springframewo ...

  9. 计蒜客 —— 字符串p型编码

    给定一个完全由数字字符('0','1','2',…,'9')构成的字符串 strstr,请写出 strstr 的 pp 型编码串. 例如:字符串122344111可被描述为“1个 1.2 个 2.1 ...

  10. 写linux脚本你怎么能不知道位置参数!?

    在写shell脚本的时候,我们经常会手动设置参数,然后对我们的输入的这些参数进行处理和分析,那么这个东东到底值怎么使用的呢? 1.$n $0代表命令本身,$1-9代表接受的第1-9个参数,10以上需要 ...