老师的第二期视频太多坑了，完全不适合小白看啊。每看一个视频都报很多错

Question

第二期视频整体时间很短，老师总是跳过很多东西，导致一个视频7分钟，可能要花1个小时的时长来对老师的源码，而老师的源码是最终版的，结构跟视频上的很多地方不一样，出了错往往不知道怎么改

Answer 1

ustbhuangyi 2019-07-30 15:16:00

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

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


这里获取了 food.count，并且

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

Answer 2

提问者 weixin_慕勒2484493 2019-07-30 15:03:42

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

Answer 3

提问者 weixin_慕勒2484493 2019-07-30 14:52:17

<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这个属性

• qq_慕姐8203528 #1

  food.count是需要用this.$set添加的，如果你嫌弃麻烦，可以在data数据里面添加一个count，然后把food传给子组件，然后就有了，或者根据老师的方法设置一个，并且在goods里面把这个count在计算属性里面遍历一遍，通过传值的方式传给购物车组件，把selectFoods这个同步一下，就可以解决这个购物车了

• qq_慕姐8203528 #2

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