vue ,v-for循环对象,不是深度克隆? 数据改变了但是页面元素没有更新。问题解决
<div id="app">
<ul >
<li
v-for="(val,key,idx) in list"
>
{{key}}
{{val}}
{{idx}}
</li>
</ul>
</div> <script>
var app = new Vue({
el: '#app',
created(){
setTimeout(()=>{
this.listp["1"] = [
0,1,2,3,4,5
]
},1500)
},
data: {
list:{},
current:1
},
methods:{ }
}) </script>
这个例子延迟1.5s之后数据并没有被渲染上dom。
研究了一番,用watch监听 变量 【list】,发现如果不开启【deep:true】 深度监听,watch 也监听不到【list】的改变;
那可能v-for是因为没有深度监听,所以监听不到。
但是也没有找到v-for关于深度监听的设置。
所以直接釜底抽薪,改变写法:
var app = new Vue({
el: '#app',
created () {
setTimeout(() => {
let old = Object.assign({}, this.list) // 浅克隆this.list
old['1'] = [ 0, 1, 2, 3, 4, 5 ];
this.list = old ; // 直接改变 this.list
}, 1500)
},
data: {
list: {}
},
methods: {}
})
这样写 数据变化以后 页面元素就相应发生改变了。
有大神有更好的办法 ,希望不吝赐教。
vue ,v-for循环对象,不是深度克隆? 数据改变了但是页面元素没有更新。问题解决的更多相关文章
- [ 记录 ] Vue 对象数组中一项数据改变,页面不更新
问题描述:将data中数据列表渲染到页面,循环生成 el-switch,点击页面中 el-switch 后数组中某项值改变,但是页面不更新 数据格式如下 export default{ data(){ ...
- js对象简单、深度克隆(复制)
javascript的一切实例都是对象,只是对象之间稍有不同,分为原始类型和合成类型.原始类型对象指的是字符串(String).数值(Number).布尔值(Boolean),合成类型对象指的是数组( ...
- vue深度监控数据改变,缓存数据到本地
项目效果图: var vm = new Vue({ el:'#app', data:{ students:[], }, watch:{ students:{ handler(){ localStora ...
- 关于vue不能像angular深度克隆数据解决办法
vue要让数据源实现响应式前提必须要在初始化的时候有这个属性 如果没有这个属性,也可实现数据实时响应.解决方法: this.数组/对象.spice(0,1,'属性值') Vue.set(要修改的数组或 ...
- 展示出版社:写上URL地址对应函数、函数当中查询出所有的出版社、对象交给模板、循环对象拿出每条数据展示
URL: from django.conf.urls import urlfrom django.contrib import adminfrom app01 import views urlpatt ...
- 循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理
在前面随笔<循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理>中介绍了在Vue + Element整合框架中,实现了动态菜单和动态路由的处理,从而可以根据 ...
- Javascript深度克隆一个对象
Javascript中的对像赋值与Java中是一样的,都为引用传递.就是说,在把一个对像赋值给一个变量时,那么这个变量所指向的仍就是原来对 像的地址.那怎么来做呢?答案是“克隆”. 克隆有两种方法:一 ...
- Java的赋值、浅克隆和深度克隆的区别
赋值 直接 = ,克隆 clone 假如说你想复制一个简单变量.很简单: int a= 5; int b= a; b = 6; 这样 a == 5, b == 6 不仅仅是int类型,其它七种原始数 ...
- 原型模式 —— Java的赋值、浅克隆和深度克隆的区别
赋值 直接 = ,克隆 clone 假如说你想复制一个简单变量.很简单: int a= 5; int b= a; b = 6; 这样 a == 5, b == 6 不仅仅是int类型,其它七种原始数 ...
随机推荐
- spark机制理解(一)
一 基本术语 Application: 基于Spark的用用户程序,包含了Driver程序和集群上的Executor. Driver Program: 运行行main函数并且新建SparkCont ...
- 基于vue-cli的快速开发框架
基于vue-cli的快速规范开发框架,已封装常用组件,可直接进行基本项目开发 1,遵循eslint规则,提升代码质量 2,集成mock模拟服务端数据,提升开发效率 3,集成vuex,可直接使用开发 4 ...
- PHP各环境下的伪静态配置
一.Apache的伪静态配置 1.网站根目录下需要有 .htaccess 文件,没有则自己创建一个,内容为 <IfModule mod_rewrite.c> RewriteEngine o ...
- 【Verilog HDL】赋值语句之阻塞赋值方式与非阻塞赋值方式
刚开始接触Verilog HDL语言时,这种硬件描述语言有一点与软件的程序设计语言直观上的最大区别大概就是这个赋值语句了(这里只是强调直观上的最大区别,事实上的最大区别并非如此). Verilog H ...
- Lua 语言学习
详细讲解见菜鸟教程 Lua. 一.数据类型 -- 直接输出 print("hello") -- 全局变量 b = print(b) -- nil(空) print(type(a)) ...
- Hibernate第二天——实体类 与缓存机制
第二天,我们先来了解一下框架里的一个重要概念:实体类 实体类:把数据表或其它持久化数据的格式映射成的类,就是实体类. 实体类的编写规则:由于对应的是javabean,因而也遵循javabean的一些规 ...
- 洛谷 P1939 【模板】矩阵加速(数列)
题目描述 a[1]=a[2]=a[3]=1 a[x]=a[x-3]+a[x-1] (x>3) 求a数列的第n项对1000000007(10^9+7)取余的值. 输入输出格式 输入格式: 第一行一 ...
- 3、顺序表、内存、类型、python中的list
1.内存.类型本质.连续存储 1.内存本质 2.C 语言实例-计算 int, float, double 和 char 字节大小 使用 sizeof 操作符计算int, float, double 和 ...
- pandas:对字符串类型做差分比较
1. 问题需求 某种行为最常发生时段.最少发生时段与X天前是否一致 需求变形:判断上下行数据是否一致 2. 预备知识 2.1 Series.ne(Series) 判断两个Series是否相等 impo ...
- C++构造函数深度探究
1.引子: 以下代码中的输出语句输出0吗,为什么? struct Test { int _a; Test(int a) : _a(a) {} Test() { Test(0); } }; Test o ...