How to add product components in shopping cart

<template>
<div class="cartcontrol">
 <!--Products reduced by one area-->
 <div class="reduce" v-show=">0">
  <i class="icon-remove_circle_outline"></i>
 </div>
 <!--Product quantity area-->
 <div class="num" v-show=">0">4</div>
 <!--Products plus one area-->
 <div class="add" @click="addCart">
  <i class="icon-add_circle"></i>
 </div>
</div>
</template>

<script>
export default {
  name: "Cartcontrol",
  props:{
    food:{
      type:Object
    }
  },
  methods:{
    //Add the number of shopping cart products    addCart(ele){
      if(!ele._constructed){
        //The event of the better-scroll distribution event scroll event and the event of the click event of the PC browser is one        // Attribute difference_constructed, there is no such attribute in the event of the click event of the PC browser        return;
      }
      //There was no quantity of products in the food at the beginning.      if(!){
        // = 1;count is not a property in the food object. If you write it directly like this, you cannot sense the changes in count when rendering the dom.        this.$set(,'count',1);
      }else{
        ++;
      }
      ();
    }
  }
}
</script>

<style scoped lang="stylus">

.cartcontrol

display flex
height .48rem
align-items center
.num
  font-size.2rem
  width .48rem
  text-align center
  color rgb(147,153,159)
.reduce,.add
  font-size .4rem
  color rgb(0,160,220)
</style>

addCart(ele){
if(!ele._constructed){
        //The event of the better-scroll distribution event scroll event and the event of the click event of the PC browser is one        // Attribute difference_constructed, there is no such attribute in the event of the click event of the PC browser        return;
      }
      //There was no quantity of products in the food at the beginning.      if(!){
         = 1;countnofoodProperties in an object，Directly tofoodAdd new attributescount，
        // When the count value changes, the count change cannot be sensed during dom rendering      }else{
        ++;
      }
      ();
    }

if(!ele._constructed){
        //The event of the better-scroll distribution event scroll event and the event of the click event of the PC browser is one        // Attribute difference_constructed, there is no such attribute in the event of the click event of the PC browser        return;
      }
      //There was no quantity of products in the food at the beginning.      if(!){
        // = 1;count is not a property in the food object. Add a new property count directly to food.        // When the count value changes, the count change cannot be sensed during dom rendering        this.$set(,'count',1);
      }else{
        ++;
      }
      ();
    }