Vue 数组和对象更新,但是页面没有刷新
在使用数组的时候,数组内部数据发生改变,但是与数组绑定的页面的数据却没有发生变化。
<ul>
<li v-for="(item,index) in todos" :key="index">{{item.name}}</li>
</ul>
data () {
return {
msg: 'Welcome to Your Vue.js App',
todos: [{
name: 'aa',
age: 14
}, {
name: 'bb',
age: 15 }, {
name: 'cc',
age: 16 }],
obj: {name: 'lihui', age: 17}
}
},
methods: {
changeTodos: function () {
var _this = this
_this.todos[0] = {
name: 'zhangsan',
age: 15
}
console.log(this.todos)
/*
this.$set(this.todos, 0, 'nn')
this.$forceUpdate()
*/
}
这种修改得方式,无法出发数组得set,导致页面得数据不会改变。有三种解决方式。
一、使用全局得set方法。
this.$set(this.todos,0,{name: 'zhangsan',age: 15});或者对象this.$set(this.obj,'key',value);
二,强制更新
this.$forceUpdate()
Vue 数组和对象更新,但是页面没有刷新的更多相关文章
- vue数组中对象属性变化页面不渲染问题
问题引入 Vue之所以能够监听Model状态的变化,是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化.但是,对于数组元素的赋值,却没有办法 ...
- vue 数组和对象渲染问题
vue 数组和对象渲染问题 最近项目有点忙碌,遇到好多问题都没有总结(╥﹏╥),在开发过程中,取vuex中的数组渲染完成之后,再次修改数组的值,数据更新了,但是视图并没有更新.以为是数组更新的问题,后 ...
- vue 数组和对象不能直接赋值情况和解决方法
Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = ...
- vue 数组、对象 深度拷贝和赋值
由于此对象的引用类型指向的都是一个地址(除了基本类型跟null,对象之间的赋值,只是将地址指向同一个,而不是真正意义上的拷贝) 数组: let a = [11,22,33]; let b = a; / ...
- vue中keepAlive的用法[返回页面不刷新]
本文转载于時間蒼白了誓言_49b9 使用vue单页开发项目时遇到一个问题:在列表页进入详情页,按返回键返回列表页时页面刷新了,用户体验非常差啊!!!查阅了一下相关问题,使用解决这个问题,下面是我的使用 ...
- vue数组操作不更新视图问题
vue 观察数组的变异方法 更新视图 push() pop() shift() unshift() splice(i,n,arr) sort(xx) reverse() ex: app.book.pu ...
- vue 数组和对象的双向绑定不响应问题
对象和数组的数据类型是对象,对象是对象这个是毫无疑问的.数组可以把索引当成键名,把索引对应的元素当成该键名的键值. vue对象有些操作不能双向绑定的原因是vue未改变原对象,以及未给新增属性增加set ...
- c# mongo 数组里对象更新
var queryDetail = new BsonDocument("cNo", doc.cNo); queryDetail.AddRan ...
- vue的组件缓存(返回页面不刷新)
每次使用返回是页面总是会刷新 导致了一些体验上的不愉快 现在 发现vue中的一个很方便的方法还可以用来优化性能就是: keep-alive缓存组件 <router-view v-if=" ...
随机推荐
- Hadoop Hive概念学习系列之hive里的索引(十三)
Hive支持索引,但是Hive的索引与关系型数据库中的索引并不相同,比如,Hive不支持主键或者外键. Hive索引可以建立在表中的某些列上,以提升一些操作的效率,例如减少MapReduce任务中需要 ...
- YTU 2580: 改错题----修改revert函数
2580: 改错题----修改revert函数 时间限制: 1 Sec 内存限制: 128 MB 提交: 194 解决: 82 题目描述 修改revert函数,实现输入N个数,顺序倒置后输出 #i ...
- 并不对劲的bzoj1305: [CQOI2009]dance跳舞
传送门-> 又是陈年老坑. 听上去不知道从何下[手]?那要是把题目换成“判断这些人能否条x支舞”呢? 这样就变成了一个网络流可以解决的问题,只要把每个人拆成喜欢和不喜欢两点,每个人两点总流量不超 ...
- 【JLOI 2011】 不重复的数字
[题目链接] 点击打开链接 [算法] 本题用map很好写,笔者用的是哈希的写法 [代码] #include<bits/stdc++.h> using namespace std; #def ...
- Linux网络协议栈(三)——网络设备(2)
2.1.网络设备的注册与注销注册网络设备发生在下列情形: (1)加载网卡驱动程序 网卡驱动程序如果被编译进内核,则它在启动时被初始化,在运行时被作为模块加载.无论初始化是否发生,所以由驱动程序控制 ...
- vss操作说明
vss命令行 一.环境变量配置 “我的电脑”->“属性”->“高级”->“系统环境变量” 1) 添加追加环境变量 名称为:Path:值为:VSS应用程序所在目录 例如:D:\Pr ...
- 关于eclipse部署项目后,在tomcat中的webapps文件夹下没有项目
转自:https://blog.csdn.net/yang505581644/article/details/78802316 一.发现问题 在eclipse中新建Dynamic Web Projec ...
- vs 中switch语句快捷键列出枚举
先switch然后两下tab会补完到default,光标显示在switch后的变量这时输入枚举,输完后回车,自动补完所有枚举的case
- 字符串常量是String类的匿名对象
String str = "Hello"; System.out.println(str.equals("Hello"));//true,字符串对象调用equa ...
- 在Visual studio 中解除 TFS 的账号绑定
在Visual Studio中, 只要使用了TFS, 就会要求输入用户名密码验证 . 但是一旦点击验证对话框下部的:记住用户名密码 以后都不能再修改用户名了. 而且重装Visual Studio 听说 ...