Vue v-for对象在数据更改后不会更新。
Vue v-for对象在数据更改后不会更新。
提问于 2018-03-07 03:28:05
我使用vue版本2.5.x
下面就是这样的例子。
无论我点击“添加项目”按钮有多难，页面中没有显示任何项目。
但是“添加项目版本2”是有效的！
添加:key不会有帮助。有什么问题吗？
let app = new Vue({
el: "#app",
data: {
items: {},
count: 0,
},
methods: {
add() {
this.items[this.count.toString()] = this.count;
this.count++;
console.log(this.items);
},
add2() {
let items = {}
items[this.count.toString()] = this.count;
this.items = items;
this.count++;
console.log(this.items);
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">
<button @click="add">add item</button>
<button @click="add2">add item version 2</button>
<p v-for="(item, key) in items" :keys="item">{{item}}</p>
</div>
Stack Overflow用户
回答已采纳
发布于 2018-03-07 03:38:24
替换：this.itemsthis.count.toString() = this.count;
Vue.set(this.items，this.count.toString()，this.count);
let app = new Vue({
el: "#app",
data: {
items: {},
count: 0,
},
methods: {
add() {
Vue.set(this.items,this.count.toString(),this.count);
this.count++;
console.log(this.items);
},
add2() {
let items = {}
items[this.count.toString()] = this.count;
this.items = items;
this.count++;
console.log(this.items);
}
}
})https://jsfiddle.net/zbb57ozv/
这是对javascript或Vue js警告的限制。查看变更检测警告( of vue document )一节，以获得更多信息：Vue-Js深度反应活性
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49143631
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号