最近使用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数组操作不刷新视图问题的解决的更多相关文章

  1. 关于Vue数组操作

    Vue的数组操作的实现代码大致如下: const aryMethods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse ...

  2. 11. VUE 数组操作

    变异方法 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() 添加元素 <ul id="example-1"> <li ...

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

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

  4. 【vuejs】vue数组操作

    问题:两种操作都能给数组添加数据,但是利用下标添加数据不会自动在视图中渲染,这个是和vue自己的规定有关,这里记录一下 网上到原因,这里附转载链接 点我传送 官网相关说明传送门

  5. vue数组操作不触发前端重新渲染

    暂时使用给数组先赋值 [ ] ,然后重新赋值的方式解决. 此外,能够监听的数组变异方法 https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E5%BC% ...

  6. linux C 数组操作

    /****************************************************************** * linux C 数组操作 * 声明: * 本文为解决陈颖奇遇 ...

  7. Vue数组更新及过滤排序

    前面的话 Vue为了增加列表渲染的功能,增加了一组观察数组的方法,而且可以显示一个数组的过滤或排序的副本.本文将详细介绍Vue数组更新及过滤排序 变异方法 Vue 包含一组观察数组的变异方法,它们将会 ...

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

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

  9. vue数组更新界面无变化

    1. vue数组更新界面无变化 1.1. 说明 对数组进行更新或者添加,一定要注意方式,我的情况是数组套数组,双重循环,在造数据的时候,不断从尾部添加数据,所以写成了如下形式,每次下拉都会去加载一批相 ...

随机推荐

  1. Kindergarten CodeForces - 484D (贪心,好题)

    大意: 给定序列, 求划分为若干段, 使得总贡献最大, 每段的贡献为max-min 可以发现最优解一定是连续一段递增或递减, 然后dp即可. #include <iostream> #in ...

  2. bzoj2565: 最长双回文串 pam

    题意:找一个串中的最长连续两个回文子串长度 题解:建两个回文树,一个正着,一个反着,每次add之后last的长度就是后缀最长的回文串长度,然后两边加一遍即可 /******************** ...

  3. leetcode-algorithms-2 Add Two Numbers

    leetcode-algorithms-2 Add Two Numbers You are given two non-empty linked lists representing two non- ...

  4. sku 加减号的增删

    ---恢复内容开始--- //php页面public function test(){ $id="1"; $data=Db::table('week3_goods') ->j ...

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

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

  6. js中如何返回一个存放对象的数组?

    我这边需要返回后台数据的形式是这样的 {[ { ", }, { ", }, { ", }, { ", }, { ", } ]} 页面是通过循环去获取每 ...

  7. [IOS微信] Unicode码 转化为字符串

    最近在研究IOS手机备份的数据,里面的微信数据中,每一个微信账号对应一个文件:mmsetting.archive 用来保存此账号的详细信息. 该文件是一个加强版的plist文件(此文件使用的是plis ...

  8. LY.JAVA面向对象编程.工具类中使用静态、说明书的制作过程、API文档的使用过程

    2018-07-08 获取数组中的最大值 某个数字在数组中第一次出现时的索引 制作说明书的过程 对工具类的使用 获取数组中的最大值 获取数字在数组中第一次出现的索引值 API的使用过程 Math

  9. Win10系列:UWP界面布局进阶9

    Grid Grid元素用来定义一个由行和列构成的网格,这是一个功能强大的布局容器,当新建一个页面时会默认选用Grid作为顶级布局元素,下面将通过三个示例来介绍Grid的使用方法. (1)定义Grid的 ...

  10. spring boot 打jar包

    想必大家经常会出现以下报错信息 java.util.concurrent.ExecutionException: org.apache.catalina.LifecycleException: Fai ...