很多时候,我们习惯于这样操作数组和对象:
 data() { // data数据
return {
arr: [1,2,3],
obj:{
a: 1,
b: 2
}
};
},
// 数据更新 数组视图不更新
this.arr[0] = 'OBKoro1';
this.arr.length = 1;
console.log(arr);// ['OBKoro1'];
// 数据更新 对象视图不更新
this.obj.c = 'OBKoro1';
delete this.obj.a;
console.log(obj); // {b:2,c:'OBKoro1'}
由于js的限制,Vue 不能检测以上数组的变动,以及对象的添加/删除,很多人会因为像上面这样操作,出现视图没有更新的问题。
解决方式:
  1. this.$set(你要改变的数组/对象,你要改变的位置/key,你要改成什么value)

    this.$set(this.arr, 0, "OBKoro1"); // 改变数组
    this.$set(this.obj, "c", "OBKoro1"); // 改变对象

    2.数组原生方法触发视图更新

    vue可以监听到数组原生方法导致的数据数据变化

  

splice()、 push()、pop()、shift()、unshift()、sort()、reverse()
意思是使用这些方法不用我们再进行额外的操作,视图自动进行更新。
推荐使用splice方法会比较好自定义,因为slice可以在数组的任何位置进行删除/添加操作
3.替换数组/对象
比方说:你想遍历这个数组/对象,对每个元素进行处理,然后触发视图更新。

vue对象数组数据变化,页面不渲染的更多相关文章

  1. vue响应式数据变化

    vue响应式数据变化 话不多说,先上代码: //拷贝一份数组原型,防止修改所有数组类型变量的原型方法 let arrayProto = Array.prototype;// 数组原型上的方法 let ...

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

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

  3. [ 记录 ] Vue 对象数组中一项数据改变,页面不更新

    问题描述:将data中数据列表渲染到页面,循环生成 el-switch,点击页面中 el-switch 后数组中某项值改变,但是页面不更新 数据格式如下 export default{ data(){ ...

  4. vue - 父组件数据变化控制子组件类名切换

    先说当时的思路和实现核心是父子组件传值和v-bind指令动态绑定class实现 1. 父组件引用.注册.调用子组件script中引用 import child from '../components/ ...

  5. vue子组件数据变化同步到父组件中

    方法:通过watch监听子组件数据变化 1.父组件中注册方法 <Child @getChildValue="getChildValue"></Child> ...

  6. Vue组件模板形式实现对象数组数据循环为树形结构

    数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout ...

  7. vue v-for的数组改变导致页面不渲染解决方法

    直接在数组里,改变数组来达到重新渲染页面的目的, 需要用push等数组方法, 或者$set(),或者给数组重新赋值,来改变数组引用地址 而是直接索引= <body> <div id= ...

  8. vue中数组删除,页面没重新渲染

    创建一个组件时,数据类型是数组,在删除这个数组中的数据时,数组中的数据是对的,但页面渲染的数据却不对. 举例:(不一定复现) <ul> <li v-for="(item, ...

  9. vue data数据变化 页面数据不更新问题

    问题: <template> <div class="container"> <div v-for="(item, index) in ar ...

随机推荐

  1. Python 常用编码规范

    一.简明概述 1.编码 如无特殊情况, 文件一律使用 UTF-8 编码 如无特殊情况, 文件头部必须加入#-*-coding:utf-8-*-标识 2.代码格式 2.1.缩进 统一使用 4 个空格进行 ...

  2. spark机器学习从0到1特征提取 TF-IDF(十二)

        一.概念 “词频-逆向文件频率”(TF-IDF)是一种在文本挖掘中广泛使用的特征向量化方法,它可以体现一个文档中词语在语料库中的重要程度. 词语由t表示,文档由d表示,语料库由D表示.词频TF ...

  3. 英语四六级模拟考试系统APP

    Android studio开发的.eclipse的SSM框架作为服务器后台.Mysql5.6. 我先上几张图吧. 需要源码可以留言给我.另外本人接外包或者有问题也可以问我.留言,我会看的.

  4. 实验三 Java基本程序设计(2)

                                             实验三 Java基本程序设计(2)                                           ...

  5. LaunchScreen作为启动图设置,修改无效的解决方案

    原有的推流APP用launchScreen做的启动图,现在要修改一张,发现修改无效. 当前测试的方法有 1,重启Xcode  卸载app 清楚xcode缓存 2,修改launchScreen.stor ...

  6. Spring全家桶——SpringBoot渐入佳境

    Spring全家桶系列--SpringBoot渐入佳境 萌新:小哥,我在实体类写了那么多get/set方法,看着很迷茫 小哥:那不是可以自动生成吗? 萌新:虽然可以自动生成,但是如果我要修改某个变量的 ...

  7. java——引入第三方jar包

    第一步:项目->New->Folder:创建一个文件夹: 第二步:把要引入的jar包粘贴到新建的文件夹中: 第三步:选中引入的jar包->Build Path->Add to ...

  8. ECharts使用教程

    引入 ECharts ECharts 3 开始不再强制使用 AMD 的方式按需引入,代码里也不再内置 AMD 加载器.因此引入方式简单了很多,只需要像普通的 JavaScript 库一样用 scrip ...

  9. TCP 半连接队列和全连接队列满了会发生什么?又该如何应对?

    前言 网上许多博客针对增大 TCP 半连接队列和全连接队列的方式如下: 增大 TCP 半连接队列的方式是增大 /proc/sys/net/ipv4/tcp_max_syn_backlog: 增大 TC ...

  10. C实现进程间通信(管道; 共享内存,信号量)

    最近学习了操作系统的并发:以下是关于进程间实现并发,通信的两个方法. 例子: 求100000个浮点数的和.要求: (1)随机生成100000个浮点数(父进程). (2)然后创建4个后代进程,分别求25 ...