3回答

ustbhuangyi

2019-07-30

二期视频确实不适合小白看，他的定位是给一期学生的福利。如果是新手，建议先过一遍一期视频，再看二期视频并跟着做一遍。
下面看一下你的问题：

这个是 Vue 的报错，其实提示已经很明显了，首先是 cart-control.vue 组件报错，其次，报错的原因在 render 过程中执行了 undefined.count，那么基本上就定位了报错的位置，在模板中，xxx.count 这个 xxx 是 undefined，接下来看一下 cart-control.vue 的模板。


这里获取了 food.count，并且

food 的初始值是 undefined，所以你要检查一下你有没有在父组件给它传入这个 food

0

0

weixin_慕勒2484493

提问者

2019-07-30

既然一开始没有这个属性，点击add才会判断它是否有这个属性，没有就添加。那我一开始的渲染不就没有这个属性，然后报错吗

0

0

weixin_慕勒2484493

提问者

2019-07-30

<template>

<div class="cartcontrol">

<transition name="move">

<div class="cart-decrease" v-show="food.count>0" @click.stop="decrease">

<span class="inner icon-remove_circle_outline"></span>

</div>

</transition>

<div class="cart-count" v-show="food.count>0">{{food.count}}</div>

<div class="cart-add icon-add_circle" @click.stop='add'></div>

</div>

</template>

<script>

export default {

name: 'cart-control',

props: {

food: {

type: Object

}

},

methods: {

add() {

if(!this.food.count) {

this.$set(this.food,'count',1)

} else {

this.food.count++

}

},

decrease() {

if(this.food.count > 0) {

this.food.count--

}

}

}

}

</script>

<style lang="stylus" scoped>

@import "~common/stylus/variable"

.cartcontrol

display: flex

align-items: center

.cart-decrease

display: inline-block

padding: 6px

opacity: 1

.inner

display: inline-block

line-height: 24px

font-size: $fontsize-large-xxx

color: $color-blue

transition: all 0.4s linear

transform: rotate(0)

&.move-enter-active, &.move-leave-active

transition: all 0.4s linear

&.move-enter, &.move-leave-active

opacity: 0

transform: translate3d(24px, 0, 0)

.inner

transform: rotate(180deg)

.cart-count

width: 12px

line-height: 24px

text-align: center

font-size: $fontsize-small-s

color: $color-grey

.cart-add

display: inline-block

padding: 6px

line-height: 24px

font-size: $fontsize-large-xxx

color: $color-blue

</style>

比如这里，我完全复制老师的代码，把相关的东西都删了，依然说我没有count这个属性

0

2

qq_慕姐8203528

我之前也不懂，我就是在data.json数据直接添加一个count数据，然后利用vuex把数据分配到几个子组件里面去，然后进行同步操作，这样来实现的后来我看老师添加一个this.$set()属性，我就跟着老师做一遍，挺好玩的，我觉得这样很好玩

2019-08-09

共2条回复