<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. python+requests实现接口测试 - cookies的使用

    在很多时候,发送请求后,服务端会对发送请求方进行身份识别,如果请求中缺少识别信息或存在错误的识别信息, 会造成识别失败. 如一些需要用户登录以后才能访问的页面. import requests mya ...

  2. java的静态方法多态和匿名对象

    静态方法: 看如下代码 父类: public class FU { public static void show(){ System.out.println("this is fu!&qu ...

  3. Spring4自动装配(default-autowire)

    §1 什么是自动装配? Spring IoC容器可以自动装配(autowire)相互协作bean之间的关联关系.因此,如果可能的话,可以自动让Spring通过检查BeanFactory中的内容,来替我 ...

  4. Tomcat出现需要输入账号和密码问题

    这里是端口冲突问题: 可以做一下几个解决方案: 第一:更好Tomcat/conf/server.xml文件里面的制定8080端口号,更改为你能记住的端口数: 第二:找到冲突的端口的进程,杀死这个进程, ...

  5. #leetcode刷题之路50-Pow(x, n)

    实现 pow(x, n) ,即计算 x 的 n 次幂函数.示例 1:输入: 2.00000, 10输出: 1024.00000示例 2:输入: 2.10000, 3输出: 9.26100 #inclu ...

  6. Kafka基础认识

    1):Apache kafka介绍及架构详解 假设一个场景: 数据源: 应用系统A 产生的用户访问数据和订单数据 10000 条一秒钟 push:推送数据 消息系统:队列 产生的数据量>数据量 ...

  7. 菜鸟成长心酸史之php初遇教程

    phpstorm是我接触到的第二个制作网页的程序,刚拿到php的时候,我是懵逼的,从安装到使用,可以说一点都不会,尤其是它还要配合wampsever使用,即使看视频,不同的制作php的软件也有不同的地 ...

  8. redis缓存数据库入门教程

    入门redis教程 前言: 应公司需求,最近学习了一下redis数据库的一些简单入门的教程,整理出来分享给大家,喜欢的可以关注和点赞哦~ 如文章中有不足之处求指正,谢谢 目录 ·什么是redis?为什 ...

  9. BZOJ2120_数颜色_KEY

    题目传送门 裸的带修莫队. 在Sort时如果左右区间都在同一块中,就按询问的修改的先后Sort. 对于每次查询判断向前或向后修改. 当size为N*2/3时据说是最优.O(N^(3/5)). code ...

  10. javaweb 解决jsp中${}传递中文值到后端以及get请求中文乱码的问题

    首先,不要用get传中文,我试了一些方法发现不行,所以果断决定用post传参, 这里用 encodeURI 进行一次编码传入后端 注意:${tplname} 要加 ' $.ajax({ url: '/ ...