vue 點(diǎn)擊某個(gè)元素切換樣式的問題？

點(diǎn)擊某個(gè)div樣式變化 但是不影響其他列表的div
我寫的代碼 如何切換到其他的列表里面 其他的列表里相同索引的div也會(huì)改變樣式 而且每個(gè)列表里面的首個(gè)元素都是點(diǎn)擊之后的樣式 求解

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

data() {
    return {
      goods: [],
      isSelected:0,
      cartList:[],
      name:'food',
      styles:'food',
      isAdded:0
    }
  },
  computed:{



  
  },
  methods:{
    addCart(food,index) {

     this.cartList.push(food)
     if (!food.count) {
        Vue.set(food, 'count', 1)
      }
      this.isAdded = index
      console.log(food)
    },

    menuClick (name,index) {
     this.isSelected = index 
     this.name=name
    }
  }
}