vue實現(xiàn)餓了么加入購物車的問題？數(shù)據(jù)比較亂

點擊白色的菜單 黃色的區(qū)域增加。。。 。。。 感覺應(yīng)該是數(shù)據(jù)的問題

<template>
  <div>
    <div class="order">
      <div class="order-head">
        
      </div>
      <div class = 'border'></div>
      <div class="order-list" v-for = 'item in carList'>
        {{item}}
      </div>

    </div>
     <div class = "foods-wrapper">
      <div class="fooList" v-for="(item,index) in goods" @click.stop.prevent="addCart(item)">
        <div v-for="food in item.foods" v-show="name==item.name" class = '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',
      selectedFood: '',
    }
  },
  computed:{
    selectFoods() {
      let foods = []
      this.goods.forEach((good) => {
        good.foods.forEach((food) => {
          if (food.count) {
            foods.push(food)
          }
        })
      })
      return foods
    }
  },

  methods:{
    addCart(event) {
      console.log(this.item);
       this.carList.push(this.item)
      if (!event._constructed) {
        return
      }
      if (!this.food.count) {
        Vue.set(this.food, 'count', 0)
      }
      this.food.count++;
      this.$root.eventHub.$emit('cart.add', event.target)
    },
    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>