vue中的值变化但页面不自动更新的问题
vue 小白经常会搞不懂的问题
·
明明 console 发现值已经变化了,但是页面却始终没有更新。
<div
v-for="(item, idx) in items"
:key="idx"
@click="onClick"
>
<span :value="item" />
</div>
计算属性中的代码
data() {
return {
items: [1, 2],
}
}
methods中改变计算属性的方法`
onClick(index){
this.$set(this.items, index, this.items[index]+1);
},
this.$set()
的作用可以让值变成和data
中的值一样,是响应式的;data
中return
的所有值都是经过Object.defineProperty()
处理过的,但是 vue 中不支持数组下标的更改。vue
中对数组的api
进行了重写,所以可以使用splice
等方法也是可以的。
总结:写 vue 的时候,我们需要的值,最好都定义到 data 中,这样可以避免不必要的麻烦;还有一种方法是 this.$forceUpdate() 可以强制刷新页面,不过并不建议用到这个方法,合理的代码也是不需要用到的。
更多推荐
已为社区贡献1条内容
所有评论(0)