count报错提示undefined
来源:17-16 cartcontrol组件(2)

wangcheng3785233
2018-08-26
html:
<template>
<div class='shopcart-wrapper'>
<transition name="fade">
<div class="decrease" v-if="food.count >0" @click="decreaseGoods">
<span class="icon-remove_circle_outline"></span>
</div>
</transition>
<div class="count" v-if="food.count > 0">{{food.count}}</div>
<div class="increase" @click="increaseGoods">
<span class="icon-add_circle"></span>
</div>
</div>
</template>
script:
<script>
import Vue from 'vue'
export default {
name: 'Shopcart',
data () {
return {
hasGoods: 0
}
},
props: {
food: {
type: Object
}
},
methods: {
decreaseGoods () {
if (this.food.count) {
this.food.count--
}
},
increaseGoods () {
if (!this.food.count) {
Vue.set(this.food, 'count', 1)
} else {
this.food.count++
}
console.log(this.food)
}
}
}
</script>
对功能实现没有影响 就是一点击加入购物车之后就报错,如图:
2回答
-
food 的 prop 没有默认值,你第一次传入的值就是 undefined
042018-08-28 -
wangcheng3785233
提问者
2018-08-27
父组件
子组件
012018-08-27
相似问题