Vue数组操作不刷新视图问题的解决

最近使用Vue2.0开发项目，有一个列表使用v-for绑定到数组，按照Vue的推荐方案，使用push、splice、this.$set三个变异方法操作数组。发现在添加页面，三个方法都能及时刷新视图；但是在修改页面，只有this.$set方法修改数组元素能刷新，其他两个方法死活不刷新视图，使用Vue-devtools查看，数据都能成功修改。

尝试了在mount阶段就用push方法一个个添加，尝试把用到的对象都显示定义字段属性，尝试百度到的N种方法...花了四五个小时，都不行！但问题肯定是出在没有触发Vue刷新视图的条件上。

最终模拟了一个手工强制刷新的办法：

1、html中增加一个hidden，绑定到一个flag字段：

2、mount阶段给flag赋初值：

3、在push和splice后，修改flag的值！！！

思路：由于flag是简单字段，它的变化肯定要刷新视图，所以通过flag的变化，手工刷新视图。

由此可见，Vue的视图刷新是整体刷新，而不是只刷新变化的字段。

原文地址：https://www.cnblogs.com/oliverreal/p/9212545.html

时间： 2024-10-09 16:36:02

Vue数组操作不刷新视图问题的解决的相关文章

关于Vue数组操作

Vue的数组操作的实现代码大致如下: const aryMethods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse']; const arrayAugmentations = []; aryMethods.forEach((method)=> { // 这里是原生Array的原型方法 let original = Array.prototype[method]; // 将push, pop等封装好的方法定义在对

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

vue 观察数组的变异方法更新视图 push() pop() shift() unshift() splice(i,n,arr) sort(xx) reverse() ex: app.book.push({ name:'css', author:'lee' }) 有些方法不会改变数组 filter() concat() slice() 返回新数组需要用新返回的数组更新原数组 app.books= app.books.filter(functiion(item){ return item

vue 数组操作

1 <template> 2 <div> 3 <h3>所有注册用户</h3> 4 <ul> 5 <li v-for="(item,index) in list" v-bind:key="index"> 6 {{item}} 7 </li> 8 </ul> 9 10 <p>变异方法,改变原来的数组</p> 11 <button v-on:cli

PHP内核探索之变量(4) - 数组操作

上一节(PHP内核探索之变量(3)- hash table),我们已经知道,数组在PHP的底层实际上是HashTable(链接法解决冲突),本文将对最常用的函数系列-数组操作的相关函数做进一步的跟踪. 本文主要内容: PHP中提供的数组操作函数数组操作函数的实现结语参考文献一.PHP中提供的数组操作函数可以说,数组是PHP中使用最广泛的数据结构之一,正因如此,PHP为开发者提供了丰富的数组操作函数(参见http://cn2.php.net/manual/en/ref.array.php

vue 数组

今天项目中发现的一个问题: 在vue项目中输出一个数组,明明有俩个值:0,6,但是length为1 正常的是这样的结果研究发现,是vue源码的问题,具体内容如下: 转载自:http://www.cnblogs.com/Darlietoothpaste/p/6682407.html Vue的数组操作的实现代码大致如下: 1 const aryMethods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse']; 2

关于vue数组中对象属性变更页面没重新渲染的问题

前段时间做开发的时候用mqtt监听了服务端信息,推送过来的数据要变更数组里面的对象的数据,修改好后但是页面并没有更新,因为javascript机制,vue并不能检测到数组变化,也是查阅知道了$set()函数, 具体用法: arr.$set(index, { name : value }), index: 索引,name: 数组中对象的属性名, value: 要赋给属性的值 this.footerList.$set(i, { siteId : monitorSiteData[j].siteId,

PHP内核探索之变量（4）- 数组操作

vue 数组对象取对象的属性: Cannot read property 'xxxx' of undefined

{{ list[0].name }} list[0]没有定义能正确打印出想要的结果,但就是报错,外面套个v-for就没错了很费解与异步有关,解决办法: <template v-if=list[0]> {{ list[0].name }} </template> https://www.v2ex.com/amp/t/402145 vue 数组对象取对象的属性: Cannot read property 'xxxx' of undefined 原文地址:https://www.c

Vue数组双向绑定内幕

在Vue使用期间,我们经常会遇到对于数组的操作,但是Vue中如何实现数组双向绑定的呢,在这篇PPT中,首先回顾Vue双向绑定原理,之后再去研究Vue对于数组的特殊处理. ppt:Vue数组双向绑定内幕参考:https://ustbhuangyi.github.io/vue-analysis/ 原文地址:https://www.cnblogs.com/MarphyDemon/p/11487764.html