Vue這種情況下如何讓對(duì)應(yīng)的導(dǎo)航顯示對(duì)應(yīng)的數(shù)據(jù)，我想根據(jù)索引來傳遞數(shù)據(jù)

tab切換通過isSelected這個(gè)參數(shù)來控制，想通過點(diǎn)擊切換顯示不同菜單的也通過索引來但貌似vue數(shù)據(jù)遍歷的時(shí)候沒法寫索引請(qǐng)問代碼應(yīng)該怎么改

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

<script>
import axios from 'axios'
import Vue from 'vue'
export default {
  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,
      selectedFood: ''
    }
  },
  computed:{
    // selectFoods() {
    //   let foods = []
    //   this.goods.forEach((good) => {
    //     good.foods.forEach((food) => {
    //       if (food.count) {
    //         foods.push(food)
    //       }
    //     })
    //   })
    //   return foods
    // }
  },

  methods:{
    menuClick (index) {
 this.isSelected = index }
  }
}
</script>

回答

編輯回答

毀與悔

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

  methods:{
    menuClick (name,index) {
 this.isSelected = index 
this.name=name
    }
  }
}
</script>

2017年6月16日 16:40