vue ,v-for循环对象,不是深度克隆? 数据改变了但是页面元素没有更新。问题解决

Posted wennice

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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指令:v-for列表循环

第十节:Vue指令:v-for列表循环

转发vue v-for循环的用法(索引,键值)

javascript 深度克隆Vue对象数据

Vue - 检查你是不是在 v-for 循环的最后一个道具上

Vue.js v-for 循环绑定数组中的项目对象并在更改时更新