<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循环对象,不是深度克隆? 数据改变了但是页面元素没有更新。问题解决的更多相关文章

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

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

  2. js对象简单、深度克隆(复制)

    javascript的一切实例都是对象,只是对象之间稍有不同,分为原始类型和合成类型.原始类型对象指的是字符串(String).数值(Number).布尔值(Boolean),合成类型对象指的是数组( ...

  3. vue深度监控数据改变,缓存数据到本地

    项目效果图: var vm = new Vue({ el:'#app', data:{ students:[], }, watch:{ students:{ handler(){ localStora ...

  4. 关于vue不能像angular深度克隆数据解决办法

    vue要让数据源实现响应式前提必须要在初始化的时候有这个属性 如果没有这个属性,也可实现数据实时响应.解决方法: this.数组/对象.spice(0,1,'属性值') Vue.set(要修改的数组或 ...

  5. 展示出版社:写上URL地址对应函数、函数当中查询出所有的出版社、对象交给模板、循环对象拿出每条数据展示

    URL: from django.conf.urls import urlfrom django.contrib import adminfrom app01 import views urlpatt ...

  6. 循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理

    在前面随笔<循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理>中介绍了在Vue + Element整合框架中,实现了动态菜单和动态路由的处理,从而可以根据 ...

  7. Javascript深度克隆一个对象

    Javascript中的对像赋值与Java中是一样的,都为引用传递.就是说,在把一个对像赋值给一个变量时,那么这个变量所指向的仍就是原来对 像的地址.那怎么来做呢?答案是“克隆”. 克隆有两种方法:一 ...

  8. Java的赋值、浅克隆和深度克隆的区别

    赋值 直接  = ,克隆 clone 假如说你想复制一个简单变量.很简单: int a= 5; int b= a; b = 6; 这样 a == 5, b == 6 不仅仅是int类型,其它七种原始数 ...

  9. 原型模式 —— Java的赋值、浅克隆和深度克隆的区别

    赋值 直接  = ,克隆 clone 假如说你想复制一个简单变量.很简单: int a= 5; int b= a; b = 6; 这样 a == 5, b == 6 不仅仅是int类型,其它七种原始数 ...

随机推荐

  1. [转]浮动窗体中的OpenGL多视图的实现

    由于在工作中需要结合浮动窗体实现OpenGL的多视图,用于得到三维实体的三视图观察效果,通过参考其它资料,设计了一个程序框架,在此基础之上大家可以根据自己的需要进行扩充,实现需要的功能. 程序实现效果 ...

  2. [原创]C/C++语言中,如何在main.c或main.cpp中调用另一个.c文件

    C/C++语言中,如何在main.cpp中调用另一个.c文件主要有5种思路: 1.在VS2012 IDE中,将被引用的.c文件后缀名全部修改为.h,然后通过IDE的解决方案资源管理器中鼠标右键单击“头 ...

  3. 【vue】如何在 Vue-cli 创建的项目中引入iView

    根据vue项目的搭建教程,一下记录下如何在Vue-cli创建的项目中引入iView. 1)安装iView,在项目下 cnpm install  iview  --save 2 ) 在 webpack ...

  4. 《The C Programming Language》读书笔记(一)

    1. 对这本书的印象 2011年进入大学本科,C语言入门书籍如果我没记错的话应该是谭浩强的<C程序设计>,而用现在的眼光来看,这本书只能算是一本可用的教材,并不能说是一本好书.在自学操作系 ...

  5. FPGA之CORDIC算法实现_理论篇(上)

    关于cordic的算法原理核心思想就是规定好旋转角度,然后通过不停迭代逐步逼近的思想来实现数学求解,网上关于这部分的资料非常多,主要可以参考: 1)https://blog.csdn.net/qq_3 ...

  6. Oracle单节点_Grid_Infrastructure_DB_安装过程图解(一/三)

    首先进行各种准备: ASMLIB的准备,用户和目录的创建. 安装好Linux之后(采用了OEL 5.7),查看是否光盘中包含ASMLIB:

  7. PPAS通过DBLink,访问Oracle数据库

    磨砺技术珠矶,践行数据之道,追求卓越价值 回到上一级页面: PostgreSQL基础知识与基本操作索引页     回到顶级页面:PostgreSQL索引页 作者 高健@博客园  luckyjackga ...

  8. jQuery学习- 获取与设置属性的函数

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. 【转载】D3D中的Texture应用示例

    原文:D3D中的texture应用示例 本文列举了Direct3D中各种纹理应用实现:黑暗贴图,发光贴图,漫反射映射贴图,细节纹理,纹理混合,有较详尽的注解.其中黑暗贴图,发光贴图,细节纹理都是采用多 ...

  10. Codeforces 1155 D Beautiful Array DP,最大子段和

    题意 给出一个长度为\(n\)的数列和数字\(x\),经过最多一次操作将数列的一个子段的每个元素变为\(a[i]*x\),使该数列的最大子段和最大 分析 将这个数列分为3段考虑,第一段和第三段是未修改 ...