Vue这种情况下如何让对应的导航显示对应的数据,我想根据索引来传递数据

clipboard.png
tab切换通过isSelected这个参数来控制,想通过点击切换显示不同菜单的 也通过索引来 但貌似vue数据遍历的时候没法写索引 请问代码应该怎么改

<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>

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注