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>

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

http://img.mukewang.com/szimg/5b8273bd0001de6517450768.jpg

写回答

2回答

ustbhuangyi

2018-08-27

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

0
4
wangcheng3785233
默认值添加 default(){}
2018-08-28
共4条回复

wangcheng3785233

提问者

2018-08-27

父组件

//img.mukewang.com/szimg/5b83bf360001f9da09290565.jpg

子组件

//img.mukewang.com/szimg/5b83bfd80001ef9306960747.jpg

0
1
ustbhuangyi
你试着给 food 的 prop 加一个默认值 {} 呢
2018-08-27
共1条回复

Vue.js2.5+cube-ui重构饿了么App(经典再升级)

掌握Vue1.0到2.0再到2.5最全版本应用与迭代,打造极致流畅的WebApp

9868 学习 · 4162 问题

查看课程