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类型,其它七种原始数 ...
随机推荐
- STM32F103 ucLinux开发BOOT
STM32F103 ucLinux开发BOOT STM3210E-EVAL官方开发板主芯片STM32F103ZET6: 片内512K Flash,地址0x0800 0000 ~ 0x0807 FFFF ...
- ubuntu16.04系统gcc下降和升级
gcc下降 1 安装 sudo apt-get install -y gcc-4.7 sudo apt-get install -y g++-4.7 2 重新建立软连接 cd /usr/bin #进入 ...
- 探索photo-sphere-viewer全景插件
此插件是一位外国人写的,官网API地址:https://photo-sphere-viewer.js.org/#methods 我只是记录下我在使用此插件时用到的方法和相关属性,以防以后忘记 1.按要 ...
- python 集合总结
''' 集合:1:他是无序的,他是不重复的. 2,他里面的元素必须是可哈希的. int str bool ()但是它本身是不可哈希的. 3,集合不能更改里面的元素. 4,集合可以求交集,并集,差集,反 ...
- 用margin实现两列布局中的自适应列
<div id="wrapper"> <div id="col1"> "fixed" </div> &l ...
- 时间戳转为C#格式时间
经常发现很多地方使用一个时间戳表示时间.比如: 1370838759 表示 2013年6月10日 12:32:39. 我们就需要一个工具,方便地转换这种时间格式 什么是时间戳? 时间戳, 又叫Unix ...
- linux-RPM 打包原理 SPEC 编写规范
一.编写spec脚本 由前面的日志了解到,生成rpm除了源码外,最重要的就是懂得编写.spec脚本.rpm建包的原理其实并不复杂,可以理解为按照标准的格式整理一些信息,包括:软件基础信息,以及安装.卸 ...
- 20145209刘一阳《JAVA程序设计》第九周课堂测试
第九周课堂测试 1.域名解析服务器(ARP)负责将域名转化为IP地址,从而与主机连接.(B) A .true B .false 2.下列关于URL类的说法,正确的是(BD) A .URL 类自身可根据 ...
- Hbase操作table常见方法示例
首先上我的输出类: /** * 功能:电池历史数据数据结构 * Created by liuhuichao on 2016/12/5. */ public class ResBatteryDataHi ...
- 07- django组件:中间件
1.中间件的概念 中间件顾名思义,是介于request与response处理之间的一道处理过程,相对比较轻量级,并且在全局上改变django的输入与输出.因为改变的是全局,所以需要谨慎实用,用不好会影 ...