zoukankan      html  css  js  c++  java
  • 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: {}
    })
    

      

    这样写 数据变化以后 页面元素就相应发生改变了。

    有大神有更好的办法 ,希望不吝赐教。

  • 相关阅读:
    常用模块——hashlib模块
    day21作业
    常用模块——configparser模块
    常用模块——xml模块
    常用模块——json模块
    常用模块——shelve模块
    常用模块——pickle模块
    shutil模块
    常用模块——os模块
    简易nagios安装出现的问题及解决方法
  • 原文地址:https://www.cnblogs.com/wennice/p/9520207.html
Copyright © 2011-2022 走看看