count报错提示undefined

Question

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>

对功能实现没有影响 就是一点击加入购物车之后就报错，如图：

Answer 1

ustbhuangyi 2018-08-27 01:48:24

food 的 prop 没有默认值，你第一次传入的值就是 undefined

• 提问者 wangcheng3785233 #1

  我不明白 他的默认值怎么给。这个food是从父组件传递过来的，并不是为空，这个props只能去接受，老师的代码也并没有给默认值，只是接受，然后定义类型。

• ustbhuangyi 回复 提问者 wangcheng3785233 #2

  你父组件有定义默认值吗，贴代码看看

• 提问者 wangcheng3785233 回复 ustbhuangyi #3

  老师  我贴代码了 food 是在循环里边取得值

点开查看后面1条评论

Answer 2

提问者 wangcheng3785233 2018-08-27 17:09:54

父组件

子组件

• ustbhuangyi #1

  你试着给 food 的 prop 加一个默认值 {} 呢