vue数组中数据变化但是视图没有更新解决方案
原文链接:http://www.cnblogs.com/sufubo/p/6906261.html#undefined
问题:在vue项目中,我更改数组中的某一条数据,直接arr[i]=newVal ,发现页面上数组没有实时刷新;
查看官网发现:
由于 JavaScript 的限制,Vue 不能检测以下变动的数组:
- 当你利用索引直接设置一个项时,例如:
vm.items[indexOfItem] = newValue
- 当你修改数组的长度时,例如:
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数组中数据变化但是视图没有更新解决方案的更多相关文章
- vue响应式数据变化
vue响应式数据变化 话不多说,先上代码: //拷贝一份数组原型,防止修改所有数组类型变量的原型方法 let arrayProto = Array.prototype;// 数组原型上的方法 let ...
- vue 数据改变但是视图没更新
在使用过程中会出现数据改变但是视图没有更新的情况(类型数组或者对象),这里我们就需要用到 $set 如果是对象类型: this.$set(this.userInfo, 'name', 'gionlee ...
- vue 数组中嵌套的对象添加新属性--页面更新
vue 数组中嵌套的对象添加新属性--页面更新:https://www.jianshu.com/p/8f0e5bb13735
- vue修改elementUI的分页组件视图没更新问题
转: vue修改elementUI的分页组件视图没更新问题 今天遇到一个小问题平时没留意,el-pagination这个分页组件有一个属性是current-page当前页.今天想在methods里面手 ...
- vue 在使用数组的时候,数组内部数据发生变化,视图却没有改变
data(){ return{ todos: [ {name: 'aa', age: 22}, {name: 'bb', age: 23} ] } } methods:{ changeTodos(){ ...
- vue子组件数据变化同步到父组件中
方法:通过watch监听子组件数据变化 1.父组件中注册方法 <Child @getChildValue="getChildValue"></Child> ...
- 解决vue中对象属性改变视图不更新的问题
在使用VUE的过程中,会遇到这样一种情况, vue data 中的数据更新后,视图没有自动更新. 这个情况一般分为两种, 一种是数组的值改变,在改变数组的值的是时候使用索引值去更改某一项,这样视图不会 ...
- 当From窗体中数据变化时,使用代码获取数据库中的数据然后加入combobox中并且从数据库中取得最后的结果
private void FormLug_Load(object sender, EventArgs e) { FieldListLug.Clear();//字段清除 DI = double.Pars ...
- MS SQL Server中数据表、视图、函数/方法、存储过程是否存在判断及创建
前言 在操作数据库的时候经常会用到判断数据表.视图.函数/方法.存储过程是否存在,若存在,则需要删除后再重新创建.以下是MS SQL Server中的示例代码. 数据表(Table) 创建数据表的时候 ...
随机推荐
- ObjectAnimator属性动画示例代码
import android.animation.AnimatorSet; import android.animation.ObjectAnimator; import android.app.Ac ...
- haproxy-负载均衡介绍
参考:http://www.iyunv.com/thread-252539-1-1.html 负载均衡介绍 四层和七层负载均衡的区别 四层 所谓的四层就是ISO参考模型中的第四层.四层负载均衡也称为四 ...
- JAVA反射机制,总结下
1.总体概述 Java反射机制指的是在Java程序运行状态中,对于任何一个类,都可以获得这个类的所有属性和方法:对于给定的一个对象,都能够调用它的任意一个属性和方法.这种动态获取类的内容以及动态调用对 ...
- c语言求素数以及改进算法
代码需要使用c99编译 #include <stdio.h> #include <stdlib.h> #include <math.h> //是否为素数 //从2到 ...
- elk报错解决
.elasticsearch启动失败如下: [root@bogon home]# /home/elasticsearch-/bin/elasticsearch [--11T07::,][WARN ][ ...
- jbolt插件创建jfinal项目
Jfina官方文档:https://www.jfinal.com/doc JFinal由Handler.Interceptor.Controller.Render.Plugin五大部分组成,且JFin ...
- PHP非对称加密
加密的类型: 在日常设计及开发中,为确保数据传输和数据存储的安全,可通过特定的算法,将数据明文加密成复杂的密文.目前主流加密手段大致可分为单向加密和双向加密. 单向加密:通过对数据进行摘要计算生成密文 ...
- 解决使用wamp怎么使用php命令行
用了wamp,把php加到环境变量就报错啊! 那怎么用命令行啊! 可以找么着:(比如想执行 php think build --module demo) E:\php-project\tp5.> ...
- alertmanager + federate - Prometheus outside k8s cluster + 总体架构图 对接企业微信告警 + curl alertmanager to send alert
1.实验的架构 2.k8s 集群外的Prometheus的配置文件 [root@do1cloud03 prometheus]# cat prometheus.yml |egrep -v '#' glo ...
- 2019JAVA课程总结
课程总结 1.子类不能直接访问父类的私有属性,可通过get(),set()来间接访问. 2.super(),this()不可同时使用,因为其都必须放在首行,所以不可同时使用. 3.若删去super() ...