<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: {}
})
這樣寫 數據變化以后 頁面元素就相應發生改變了。
有大神有更好的辦法 ,希望不吝賜教。
