Vue.js下拉列表联动问题：点击分类无法切换显示对应内容

问题原因 #

你现在所有分类共用了同一个toggle变量，点击任何按钮都会翻转这个布尔值，结果就是要么所有列表都显示，要么都隐藏，自然没法单独打开对应分类的列表。

解决方案 #

改成用一个变量记录当前激活的分类标识，而非布尔值控制显隐，这样能精准控制每个分类的展开/收起，同时自动关闭其他分类。

核心修改步骤 #

1. 替换控制变量：把原来的show/toggle换成activeCategory，初始值设为null（默认全部收起），若想默认打开某分类，可设为对应标识（比如'cars'）。
2. 修改按钮逻辑：点击按钮时，将activeCategory设为当前分类的标识；如果点击的是已激活的分类，就把它设为null（关闭该分类）。
3. 修正显隐条件：每个分类的列表用v-if判断activeCategory是否等于当前分类的标识，比如汽车列表判断activeCategory === 'cars'。
4. 修复语法错误：你的代码里::key多了一个冒号，应改为:key。

修改后的完整代码 #

模板部分 #

<h2 class="text-center my-font text-light">
  <button @click="activeCategory = activeCategory === 'cars' ? null : 'cars'" class="badge badge-danger menu-label-size w-50">Cars</button>
</h2> 
<div v-if="activeCategory === 'cars'" class="row">
  <div class="col-12">
    <div class="cards-item text-center ">
      <div v-for="item in cars" :key="item.id" class="card" style="width: 10rem;">
          <img :src="'./images/cars/img' + item.img + '.png'" class="card-img-top img-fluid" alt="item.name">
          <div class="card-body d-flex flex-column justify-content-end">
            <h4 class="card-title my-font">{{ item.name }}</h4>
            <p class="badge-danger font-weight-bold">{{ item.price }}</p>
          </div>
        </div>
    </div>
  </div>
</div>

<h2 class="text-center my-font text-light">
  <button @click="activeCategory = activeCategory === 'motos' ? null : 'motos'" class="badge badge-danger menu-label-size w-50">Motos</button>
</h2> 
<div v-if="activeCategory === 'motos'" class="row">
  <div class="col-12">
    <div class="cards-item text-center">
      <div v-for="item in motos" :key="item.id" class="card" style="width: 10rem;">
          <img :src="'./images/motos/img' + item.img + '.png'" class="card-img-top img-fluid" alt="item.name">
          <div class="card-body d-flex flex-column justify-content-end">
            <h4 class="card-title my-font">{{ item.name }}</h4>
            <p class="badge-danger font-weight-bold">{{ item.price }}</p>
          </div>
        </div>
    </div>
  </div>
</div>

<h2 class="text-center my-font text-light">
  <button @click="activeCategory = activeCategory === 'bikes' ? null : 'bikes'" class="badge badge-danger menu-label-size w-50">Bikes</button>
</h2> 
<div v-if="activeCategory === 'bikes'" class="row">
  <div class="col-12">
    <div class="cards-item text-center">
      <div v-for="item in bikes" :key="item.id" class="card" style="width: 10rem;">
          <img :src="'./images/bikes/img' + item.img + '.png'" class="card-img-top img-fluid" alt="item.name">
          <div class="card-body d-flex flex-column justify-content-end">
            <h4 class="card-title my-font">{{ item.name }}</h4>
            <p class="badge-danger font-weight-bold">{{ item.price }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>

脚本部分 #

const app = new Vue({
  el: '#app',
  data: {
    activeCategory: null, // 初始全部收起，想默认打开某分类可改为'cars'/'motos'/'bikes'
    cars: [{/* 你的汽车数据 */}],
    motos: [{/* 你的摩托数据 */}],
    bikes: [{/* 你的自行车数据 */}],
  },
})

可选优化：简化重复代码 #

如果想避免重复写模板，可把分类数据整合为数组，用v-for循环渲染所有分类，后续加新分类只需更新数据：

优化后的脚本 #

const app = new Vue({
  el: '#app',
  data: {
    activeCategory: null,
    categories: [
      { name: 'Cars', key: 'cars', imgBasePath: './images/cars/img', list: [{/* 汽车数据 */}] },
      { name: 'Motos', key: 'motos', imgBasePath: './images/motos/img', list: [{/* 摩托数据 */}] },
      { name: 'Bikes', key: 'bikes', imgBasePath: './images/bikes/img', list: [{/* 自行车数据 */}] },
    ]
  }
})

优化后的模板 #

<div v-for="category in categories" :key="category.key">
  <h2 class="text-center my-font text-light">
    <button @click="activeCategory = activeCategory === category.key ? null : category.key" class="badge badge-danger menu-label-size w-50">{{ category.name }}</button>
  </h2>
  <div v-if="activeCategory === category.key" class="row">
    <div class="col-12">
      <div class="cards-item text-center ">
        <div v-for="item in category.list" :key="item.id" class="card" style="width: 10rem;">
            <img :src="category.imgBasePath + item.img + '.png'" class="card-img-top img-fluid" alt="item.name">
            <div class="card-body d-flex flex-column justify-content-end">
              <h4 class="card-title my-font">{{ item.name }}</h4>
              <p class="badge-danger font-weight-bold">{{ item.price }}</p>
            </div>
          </div>
      </div>
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者user18182496