<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. java 控制流

    一:     块作用域 块(即复合语句):是指由一对花括号括起来的若干条简单的java语句.块决定了变量的作用域,一个块可以嵌套在另一个块中,如下: public class print_In { p ...

  2. mac最常用快捷键

    本人使用的是18款512g的macbookpro<后续简称mbp>,已升级最新mojave系统. 以下是我平时记录.也是使用最多的快捷键,惠存.     1.切换拼音和字母 control ...

  3. 学习sbtenv

    背景 最近由于工作需要, 我总是在不同的scala项目间流动开发. 这就遇到一个很棘手的问题, 这几个项目用的sbt版本不一致, 老项目用的是 sbt 0.13.15, 新项目用的是 sbt 1.0. ...

  4. 时间戳转为C#格式时间

    经常发现很多地方使用一个时间戳表示时间.比如: 1370838759 表示 2013年6月10日 12:32:39. 我们就需要一个工具,方便地转换这种时间格式 什么是时间戳? 时间戳, 又叫Unix ...

  5. 【转载】Spark学习 & 机器学习

    然后看的是机器学习这一块,因为偏理论,可以先看完.其他的实践,再看. http://www.cnblogs.com/shishanyuan/p/4747761.html “机器学习是用数据或以往的经验 ...

  6. PyQt5在QWidget窗体中显示Qwidget的自定义类(补:完美解决)

    [概览] 1.显示原生Qwidget 1)不使用布局(绝对定位) 2)使用布局 2.显示Qwidget的自定义类 1)不使用布局(绝对定位)       2)使用布局 [知识点] 1.显示原生Qwid ...

  7. 洛咕 P2447 [SDOI2010]外星千足虫

    一开始以为是异或高斯消元,实际上是简单线性基. 直接往线性基里插入,直到线性基满了就解出来了. // luogu-judger-enable-o2 #include<bits/stdc++.h& ...

  8. loj558 「Antileaf's Round」我们的CPU遭到攻击

    考完了可以发题解了. 做法是link-cut tree维护子树信息,并不需要维护黑树白树那些的. 下面是一条重链: 如果4是根的话,那么在splay上是这样的: 在splay中,子树的信息都已经计算完 ...

  9. luogu1117 [NOI2016]优秀的拆分

    luogu1117 [NOI2016]优秀的拆分 https://www.luogu.org/problemnew/show/P1117 后缀数组我忘了. 此题哈希可解决95分(= =) 设\(l_i ...

  10. USACO Section1.3

    section1.2主要包括5道题和1个编程知识介绍.下面对这6部分内容进行学习. Complete Search 这个翻译成枚举搜索或者穷举搜索.主要用于当写代码时间不够用而且不用考虑程序的效率问题 ...