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=" ...
随机推荐
- Struts 1 Struts 2
Key Technologies Primer https://struts.apache.org/primer.html Threads With Struts 1 you were require ...
- windows下的java+maven项目环境搭建
年底了,进公司刚好半年,于是全新一轮的挑战开始:让我接触java项目了,真的是全新的,完全一片茫然.经过了半个月的折腾,把环境搭了一遍又一遍,还可以小小的改一下程序,还OK啦~继续努力.接下来,进入正 ...
- web项目开发 之 前端规范 --- HTML编码规范
此文严格按照W3C规范和部分实际项目可读性,浏览器加载,性能等众多属性权衡,做出平时前端编码规范文 档.供广大web工作者参考并实施,对维护和项目扩展升级都能省时省力. 转载请注明出处,JS前端实用开 ...
- iOS 7 present/dismiss转场动画
前言 iOS 7以后提供了自定义转场动画的功能,我们可以通过遵守协议完成自定义转场动画.本篇文章讲解如何实现自定义present.dismiss自定义动画. 效果图 本篇文章实现的动画切换效果图如下: ...
- 【HAOI2007】反素数
[题目链接] 点击打开链接 [算法] 稍加分析可知,问题等价于“求1到n中,因子个数最多的数,若有多个,求最小的” 那么我们该怎么求这个数呢? 约数个数定理 : x = p1^a1p2^a2p3^a3 ...
- 【ZJOI 2006】 物流运输
[题目链接] 点击打开链接 [算法] 令cost(i,j) = 第i天到第j天走相同的路线,路线长度的最小值 那么,只需筛选出第i天到第j天可以装卸货物的码头,然后将这些码头之间连边,跑弗洛伊德(或其 ...
- 强类型的HTML模板方法与直接显示模型
模型: public class Article { [Display(Name="文章")] public string ArticleID { get; set; } [Dis ...
- HDU 5945 Fxx and game (DP+单调队列)
题意:给定一个 x, k, t,你有两种操作,一种是 x - i (0 <= i <= t),另一种是 x / k (x % k == 0).问你把x变成1需要的最少操作. 析:这肯定是 ...
- PCB Redis的安装使用
记录一下Redis的安装与基本使用 一.Redis简介 Redis(REmote DIctionary Server)远程字典服务器,免费开源,是一个高性能的(Key/Value)分布式内存数据库.其 ...
- 3 Java对象的内存布局以及对象的访问定位
先来看看Java对象在内存中的布局 一 Java对象的内存布局 在HotSpot虚拟机中,对象在内存中的布局分为3个区域 对象头(Header) Mark Word(在32bit和64bit虚拟机 ...