javascript - Vue.set动态添加属性失效问题
本文介绍了javascript - Vue.set动态添加属性失效问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
vue2 新手开发小demo遇到的问题:
<template>
<div class="cartctrl">
<div class="decrease btn" v-show="food.count > 0">
<span class="btn-content">-</span>
</div>
<div class="count" v-show="food.count > 0">{{food.count}}</div>
<div class="increase btn" v-on:click="increaseCount">
<span class="btn-content">+</span>
</div>
</div>
</template>
<script>
import Vue from 'vue'
export default {
props : {
food : {
type : Object
}
},
methods : {
increaseCount : function () {
if (!this.food.count) {
this.food.count = 1
Vue.set(this.food, 'count', 1)
console.log(this.food) // Object {count: 1, __ob__: Observer}
} else {
this.food.count ++
}
}
}
}
</script>
Vue.set(this.food, 'count', 1) 动态添加属性,但是<div class="decrease btn">
并没有显示出来,是什么原因?应该怎么解决呢?
Vue.set( object, key, value )
解决方案
increaseCount : function () {
if (!this.food.count) {
this.food.count = 1
this.food.$set('count', 1) // 这里应该这么设置才有效
console.log(this.food) // Object {count: 1, __ob__: Observer}
} else {
this.food.count ++
}
这篇关于javascript - Vue.set动态添加属性失效问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文