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的视图刷新是整体刷新,而不是只刷新变化的字段。
Vue数组操作不刷新视图问题的解决的更多相关文章
- 关于Vue数组操作
Vue的数组操作的实现代码大致如下: const aryMethods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse ...
- 11. VUE 数组操作
变异方法 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() 添加元素 <ul id="example-1"> <li ...
- vue数组操作不更新视图问题
vue 观察数组的变异方法 更新视图 push() pop() shift() unshift() splice(i,n,arr) sort(xx) reverse() ex: app.book.pu ...
- 【vuejs】vue数组操作
问题:两种操作都能给数组添加数据,但是利用下标添加数据不会自动在视图中渲染,这个是和vue自己的规定有关,这里记录一下 网上到原因,这里附转载链接 点我传送 官网相关说明传送门
- vue数组操作不触发前端重新渲染
暂时使用给数组先赋值 [ ] ,然后重新赋值的方式解决. 此外,能够监听的数组变异方法 https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E5%BC% ...
- linux C 数组操作
/****************************************************************** * linux C 数组操作 * 声明: * 本文为解决陈颖奇遇 ...
- Vue数组更新及过滤排序
前面的话 Vue为了增加列表渲染的功能,增加了一组观察数组的方法,而且可以显示一个数组的过滤或排序的副本.本文将详细介绍Vue数组更新及过滤排序 变异方法 Vue 包含一组观察数组的变异方法,它们将会 ...
- vue 数组和对象渲染问题
vue 数组和对象渲染问题 最近项目有点忙碌,遇到好多问题都没有总结(╥﹏╥),在开发过程中,取vuex中的数组渲染完成之后,再次修改数组的值,数据更新了,但是视图并没有更新.以为是数组更新的问题,后 ...
- vue数组更新界面无变化
1. vue数组更新界面无变化 1.1. 说明 对数组进行更新或者添加,一定要注意方式,我的情况是数组套数组,双重循环,在造数据的时候,不断从尾部添加数据,所以写成了如下形式,每次下拉都会去加载一批相 ...
随机推荐
- mybatis使用@param("xxx")注解传参和不使用的区别
public interface SystemParameterMapper { int deleteByPrimaryKey(Integer id); int insert(SystemParame ...
- 使用antd-mobile的ImagePicker组件实现图片的上传
这篇文章主要是记录一下在开发钉钉微应用时,实现图片上传及显示功能的过程. 这个项目用的dingyou-dingtalk-mobile这个脚手架,可直接在NowaGui上创建.这是一个关于钉钉微应用的脚 ...
- Oracle11g温习-第十三章:索引
2013年4月27日 星期六 10:46 1.索引(Index)的功能:对记录进行排序,加快表的查询速度 2.索引的分类 1)B-tree 索引(默认) a.在一个大表上 b.建立在重复值比较少的 ...
- NIO高性能框架-Netty
一:Netty是什么 ? Netty是目前最流行的由JBOSS提供的一个Java开源框架NIO框架,Netty提供异步的.事件驱动的网络应用程序框架和工具,用以快速开发高性能.高可靠性的网络服务器和客 ...
- [codechef July Challenge 2017] Chef and Sign Sequences
CHEFSIGN: 大厨与符号序列题目描述大厨昨天捡到了一个奇怪的字符串 s,这是一个仅包含‘<’.‘=’和‘>’三种比较符号的字符串.记字符串长度为 N,大厨想要在字符串的开头.结尾,和 ...
- 洛谷P1075 质因数分解
题目描述 已知正整数n是两个不同的质数的乘积,试求出两者中较大的那个质数. 输入输出格式 输入格式: 一个正整数n. 输出格式: 一个正整数p,即较大的那个质数. 输入输出样例 输入样例#1: 复制 ...
- ActiveMQ broker和客户端之间的确认
生产者发送消息:producer ---------> broker broker返回确认:broker ---------> producer 生产者发送同步消息,broker会返回Re ...
- PyCharm+QTDesigner+PyUIC使用教程
我们在PyCharm安装配置Qt Designer+PyUIC教程中已配置好了PyCharm+QTDesigner+PyUIC环境 这里在此基上我们演示如何使用这些工具,编写一个图形界面程序: 程序主 ...
- spring自定义xml标签&自定义注解
public class YafBeanDefinitionParser implements BeanDefinitionParser { private BeanDefinitionRegistr ...
- VMware workstation 14 Pro下载、安装及激活码
虚拟机安装 1.百度搜索VMware应用程序 2.功能介绍 3.下载完成 4.开始安装 双击应用程序开始安装 5.点击“下一步” 6.勾选“我接受” 选择“下一步” 7.安装文件的选择:1.默认安装路 ...