如圖這種情況 同樣物品多次選擇 如何增加count數(shù)量 而并不是多次增加名字呢

<template>
  <div>
    <div class="order">
      <div class="order-head">
        
      </div>
      <div class = 'border'></div>
      <div class="order-list">
        <ul v-for = 'food in carList'>
          <li>{{food.name}}</li><span>{{carList.count}}</span>
        </ul>
       
      </div>

    </div>
     <div class = "foods-wrapper">
      <div class="fooList" v-for="(item,index) in goods" >
        <div v-for="food in item.foods" v-show="name==item.name" class = 'food' @click ="addCart(food)" >
          <span>{{food.name}}</span>
          <span>￥{{food.price}}</span>
   
          </div>
      </div>
    </div>
  <div class="navMenu">
    <ul>
       <li v-for="(item,index) in goods" :class="isSelected == index?'navMenu-selected':'nav'" @click = 'menuClick(item.name,index)'>
          <span class="text">
            
            {{item.name}}
          </span>
        </li>
    </ul>
    
  </div>
 
 </div>
</template>

<script>
import axios from 'axios'
import Vue from 'vue'
export default {
  props: {
    food: Object
  },
  name: 'navMenu',
   created() {
    axios.get('static/data.json').then((res) => {
      console.log(res.data.goods)
      this.goods = res.data.goods
      
    });
  },
  data() {
    return {
      goods: [],
      isSelected:0,
      carList:[],
      name:'food',
    }
  },
  computed:{

  
  },

  methods:{
   addCart(newFood) {
    //判斷是否購物車中已經(jīng)有商品，如果有就增加數(shù)量，反之加入這個商品
    let foodIndex = this.cartList.findIndex(food => food.name == newFood);
    //foodIndex為-1表示不存在 ,要加入商品
    if (foodIndex === -1) {
        cartList.push({
            name: newFood,
            count: 1
        })
     //foodIndex存在 ,更新數(shù)據(jù)
    } else {
        cartList[foodIndex].count++
    }
},
    menuClick (name,index) {
    this.isSelected = index 
    this.name=name
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.navMenu{
 position: fixed;
 right: 1%;
 top:0;
 height: 100%;
 color:white;

}
.navMenu ul{
  list-style: none;
  background: #00B595;
  padding: 5%;

}
.navMenu ul li{
  margin:20% 0% 10%;
  padding: 5%;

}
.nav{

  list-style: none;
  background: #00B595;
  padding: 5%;
  margin:20% 0% 10%;
  padding: 5%;

}
.navMenu-selected{
  background: #00725E;
}
.foods-wrapper{
  background: #DBE0E3;
  position: absolute;
  top:3%;
  left:30%;
  width:60%;
  height:80%;
}
.foodList{
margin: 1%;


}
.food{
  background-color: #FFFFFF;
  border-radius: 8%;
  display: inline-block;
  height:90px;
  width:125px;
  margin: 1%;
  vertical-align: top;

}
.order{
  background: white;
  width: 25%;
  margin-top:1%;

}
.order-head{
  background-color: #00B595;
  width: 100%;
  height: 50px;
  margin-top:5%;

}
.border{
  border:1px solid #DBE0E3;
  margin-top: 2%;
}
.order-list{
  margin-top:1%;
  width:100%;
  height: 400px;
  background-color: yellow;
}


</style>