如何在 v-for 中创建选项卡面板及其内容

Question

我正在与 Vue 3 和 Bootstrap 5 合作。

我想在 v-for 里面放一些 Tabpanels。所有这些Tabs应该有不同的内容。

所以我尝试将我的 Tabs 和我的 Content 放在 v-for 中。

但它现在无法正常工作（我看不到内容）而且我无法弄清楚是什么问题..我现在不确定我是否还需要两个 v-fors或者是否可以将所有内容合而为一。

感谢您的帮助。

<ul class="mt-3 nav nav-pills" id="all_tabs" role="tablist">
  <div v-for="item in input" :key="item.id">
    <li class="ms-1 nav-item" role="presentation">
      <button
        class="nav-link active"
        :id="item.id"
        data-bs-toggle="tab"
        :data-bs-target="'#tab' + item.id"
        type="button"
        role="tab"
        :aria-controls="'tab' + item.id"
      >
        {{ item.name }}
      </button>
    </li>
  </div>
</ul>

<div class="tab-content mt-3" id="all_tabs">
  <div v-for="item in input" :key="item.id">
    <div class="tab-pane fade" :id="'tab' + item.id" role="tabpanel">
      <span>{{item.name}}</span>
    </div>
  </div>
</div>

我在 mounted 中做了以下说明，只是为了清楚 input 是如何创建的。

data() {
  return {
    array: [1,2],
    input: [],
  }
}

mounted() {
  this.array.map((i) => {
    this.input.push({
      id: i, 
      name: "Input" + i,
    })
  })
}

Answer 1

这是我的代码来让它工作：

Note: I am using <script setup> because I know it better :) - it works the same with your Options-API approach.

脚本

<script setup>
import { ref } from 'vue';

const input = ref([]);
const array = ref([1,2]);

array.value.forEach((i) => {
    input.value.push({
        id: i,
        name: "Input" + i,
    });
});
</script>

模板（重要部分）：

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
    <li v-for="(item, index) of input" class="nav-item" role="presentation">
        <button class="nav-link"
                :class="index === 0 ? 'active': null"
                :id="`${item.name}-tab`"
                data-bs-toggle="pill"
                :data-bs-target="`#${item.name}`"
                type="button"
                role="tab"
                :aria-controls="item.name"
                :aria-selected="index === 0"
        >
            {{ item.name }}
        </button>
    </li>
</ul>
<div class="tab-content" id="pills-tabContent">
    <div v-for="(item, index) of input"
         class="tab-pane fade"
         :class="index === 0  ? 'show active': null"
         :id="item.name" role="tabpanel"
         aria-labelledby="pills-home-tab"
    >
        {{ item.name }}
    </div>
</div>

main.js

import 'bootstrap/dist/js/bootstrap.bundle.min.js';
import 'bootstrap/dist/css/bootstrap.min.css';

另请注意 map has a different usecases than forEach - 在您的情况下，您应该使用 forEach.

如何在 v-for 中创建选项卡面板及其内容

how to create tabpanels and their content inside of a v-for

javascript

vue.js

vuejs3

bootstrap-5