javascript - 如何解决vuejs不能把后面增加、改动的元素渲染出来
本文介绍了javascript - 如何解决vuejs不能把后面增加、改动的元素渲染出来的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
https://jsfiddle.net/5uvo11w3/
我点addOne后仍旧还是展示原来的
<div id="container">
<h1 v-for="(item, key) in items" >
{{ key }}
</h1>
<div type="buttom" v-on:click="addOne">addOne</div>
<div type="buttom" v-on:click="consoleLog">consoleLog</div>
</div>
<script>
new Vue({
el: '#container',
data: {
items: {
"tube1":[
{"msg": "hello"},
{"msg": "world"},
],
"tube2":[
{"msg": "hello2"},
{"msg": "world2"},
],
"tube3":[
{"msg": "hello3"},
{"msg": "world3"},
]
}
},
methods:{
addOne: function(){
this.items["tube4"] = [
{"msg": "hello4"},
{"msg": "world4"},
];
},
consoleLog: function(){
console.log(this.items)
}
}
})
</script>
解决方案
这样写vue是检测不到变化的,可以通过vue.set设置。
把addOne方法改写为这样
addOne: function(){
var arr = [
{"msg": "hello4"},
{"msg": "world4"},
];
this.$set(this.items,"tube4",arr);
}
原理参考深入响应式原理
这篇关于javascript - 如何解决vuejs不能把后面增加、改动的元素渲染出来的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文