在使用数组的时候,数组内部数据发生改变,但是与数组绑定的页面的数据却没有发生变化。

  1. <ul>
  2. <li v-for="(item,index) in todos" :key="index">{{item.name}}</li>
  3. </ul>

  

  1. data () {
  2. return {
  3. msg: 'Welcome to Your Vue.js App',
  4. todos: [{
  5. name: 'aa',
  6. age: 14
  7. }, {
  8. name: 'bb',
  9. age: 15
  10.  
  11. }, {
  12. name: 'cc',
  13. age: 16
  14.  
  15. }],
  16. obj: {name: 'lihui', age: 17}
  17. }
  18. },

  

  1. methods: {
  2. changeTodos: function () {
  3. var _this = this
  4. _this.todos[0] = {
  5. name: 'zhangsan',
  6. age: 15
  7. }
  8. console.log(this.todos)
  9. /*
  10. this.$set(this.todos, 0, 'nn')
  11. this.$forceUpdate()
  12. */
  13. }

  这种修改得方式,无法出发数组得set,导致页面得数据不会改变。有三种解决方式。

一、使用全局得set方法。

this.$set(this.todos,0,{name: 'zhangsan',age: 15});或者对象this.$set(this.obj,'key',value);

二,强制更新

  1. this.$forceUpdate()

Vue 数组和对象更新,但是页面没有刷新的更多相关文章

  1. vue数组中对象属性变化页面不渲染问题

    问题引入 Vue之所以能够监听Model状态的变化,是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化.但是,对于数组元素的赋值,却没有办法 ...

  2. vue 数组和对象渲染问题

    vue 数组和对象渲染问题 最近项目有点忙碌,遇到好多问题都没有总结(╥﹏╥),在开发过程中,取vuex中的数组渲染完成之后,再次修改数组的值,数据更新了,但是视图并没有更新.以为是数组更新的问题,后 ...

  3. vue 数组和对象不能直接赋值情况和解决方法

    Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = ...

  4. vue 数组、对象 深度拷贝和赋值

    由于此对象的引用类型指向的都是一个地址(除了基本类型跟null,对象之间的赋值,只是将地址指向同一个,而不是真正意义上的拷贝) 数组: let a = [11,22,33]; let b = a; / ...

  5. vue中keepAlive的用法[返回页面不刷新]

    本文转载于時間蒼白了誓言_49b9 使用vue单页开发项目时遇到一个问题:在列表页进入详情页,按返回键返回列表页时页面刷新了,用户体验非常差啊!!!查阅了一下相关问题,使用解决这个问题,下面是我的使用 ...

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

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

  7. vue 数组和对象的双向绑定不响应问题

    对象和数组的数据类型是对象,对象是对象这个是毫无疑问的.数组可以把索引当成键名,把索引对应的元素当成该键名的键值. vue对象有些操作不能双向绑定的原因是vue未改变原对象,以及未给新增属性增加set ...

  8. c# mongo 数组里对象更新

    var queryDetail = new BsonDocument("cNo", doc.cNo);                     queryDetail.AddRan ...

  9. vue的组件缓存(返回页面不刷新)

    每次使用返回是页面总是会刷新 导致了一些体验上的不愉快 现在 发现vue中的一个很方便的方法还可以用来优化性能就是: keep-alive缓存组件 <router-view v-if=" ...

随机推荐

  1. Struts 1 Struts 2

    Key Technologies Primer https://struts.apache.org/primer.html Threads With Struts 1 you were require ...

  2. windows下的java+maven项目环境搭建

    年底了,进公司刚好半年,于是全新一轮的挑战开始:让我接触java项目了,真的是全新的,完全一片茫然.经过了半个月的折腾,把环境搭了一遍又一遍,还可以小小的改一下程序,还OK啦~继续努力.接下来,进入正 ...

  3. web项目开发 之 前端规范 --- HTML编码规范

    此文严格按照W3C规范和部分实际项目可读性,浏览器加载,性能等众多属性权衡,做出平时前端编码规范文 档.供广大web工作者参考并实施,对维护和项目扩展升级都能省时省力. 转载请注明出处,JS前端实用开 ...

  4. iOS 7 present/dismiss转场动画

    前言 iOS 7以后提供了自定义转场动画的功能,我们可以通过遵守协议完成自定义转场动画.本篇文章讲解如何实现自定义present.dismiss自定义动画. 效果图 本篇文章实现的动画切换效果图如下: ...

  5. 【HAOI2007】反素数

    [题目链接] 点击打开链接 [算法] 稍加分析可知,问题等价于“求1到n中,因子个数最多的数,若有多个,求最小的” 那么我们该怎么求这个数呢? 约数个数定理 : x = p1^a1p2^a2p3^a3 ...

  6. 【ZJOI 2006】 物流运输

    [题目链接] 点击打开链接 [算法] 令cost(i,j) = 第i天到第j天走相同的路线,路线长度的最小值 那么,只需筛选出第i天到第j天可以装卸货物的码头,然后将这些码头之间连边,跑弗洛伊德(或其 ...

  7. 强类型的HTML模板方法与直接显示模型

    模型: public class Article { [Display(Name="文章")] public string ArticleID { get; set; } [Dis ...

  8. HDU 5945 Fxx and game (DP+单调队列)

    题意:给定一个 x, k, t,你有两种操作,一种是 x - i (0 <= i <= t),另一种是 x / k  (x % k == 0).问你把x变成1需要的最少操作. 析:这肯定是 ...

  9. PCB Redis的安装使用

    记录一下Redis的安装与基本使用 一.Redis简介 Redis(REmote DIctionary Server)远程字典服务器,免费开源,是一个高性能的(Key/Value)分布式内存数据库.其 ...

  10. 3 Java对象的内存布局以及对象的访问定位

    先来看看Java对象在内存中的布局   一 Java对象的内存布局 在HotSpot虚拟机中,对象在内存中的布局分为3个区域 对象头(Header) Mark Word(在32bit和64bit虚拟机 ...