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: {}
})

  

這樣寫 數據變化以后 頁面元素就相應發生改變了。

有大神有更好的辦法 ,希望不吝賜教。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2026 CODEPRJ.COM