Bootstrap 5 选项卡不会根据 vue 3 项目中的选项卡单击而更改

Question

我正在尝试使用 bootstrap 5 构建一个 vue3 应用程序。我正在添加选项卡。我可以单击选项卡，但

tab-content

卡在初始选项卡上。我该如何解决这个问题？

package.json：

{
  "name": "my-dashboard",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.5.2",
    "@fortawesome/free-brands-svg-icons": "^6.5.2",
    "@fortawesome/free-solid-svg-icons": "^6.5.2",
    "@fortawesome/vue-fontawesome": "^3.0.6",
    "@popperjs/core": "^2.11.8",
    "axios": "^1.6.8",
    "bootstrap": "^5.3.3",
    "core-js": "^3.8.3",
    "crypto-browserify": "^3.12.0",
    "datatables.net-vue3": "^3.0.1",
    "dotenv": "^16.4.5",
    "highcharts": "^11.4.1",
    "highcharts-vue": "^2.0.1",
    "os-browserify": "^0.3.0",
    "path": "^0.12.7",
    "path-browserify": "^1.0.1",
    "stream-browserify": "^3.0.0",
    "vm-browserify": "^1.1.2",
    "vue": "^3.4.21",
    "vue-axios": "^3.5.2",
    "vue-jalali-moment": "^1.0.0",
    "vue3-daterange-picker": "^1.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@types/bootstrap": "^5.2.10",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "sass": "^1.75.0",
    "sass-loader": "^14.2.1",
    "style-loader": "^4.0.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "browser": true,
      "es2021": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser",
      "ecmaVersion": 2021,
      "requireConfigFile": false
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

navBar.vue：

<template>
  <div id="navs" class="m-2">
    <ul class="nav nav-tabs" role="tablist">
      <li class="nav-item">
        <a
          class="nav-link"
          :class="{ active: activeTab === 'web' }"
          @click="activeTab = 'web'"
          href="#web"
          ><font-awesome-icon icon="globe"
        /></a>
      </li>
      <li class="nav-item">
        <a
          class="nav-link"
          :class="{ active: activeTab === 'flag' }"
          @click="activeTab = 'flag'"
          href="#flag"
          ><font-awesome-icon icon="flag"
        /></a>
      </li>
      <li class="nav-item">
        <a
          class="nav-link"
          :class="{ active: activeTab === 'fb' }"
          @click="activeTab = 'fb'"
          href="#fb"
          ><font-awesome-icon :icon="{ prefix: 'fab', iconName: 'facebook' }"
        /></a>
      </li>
      <li class="nav-item">
        <a
          class="nav-link"
          :class="{ active: activeTab === 'twitter' }"
          @click="activeTab = 'twitter'"
          href="#twitter"
          ><font-awesome-icon
            :icon="{ prefix: 'fab', iconName: 'square-x-twitter' }"
        /></a>
      </li>
      <li class="nav-item">
        <a
          class="nav-link"
          :class="{ active: activeTab === 'yt' }"
          @click="activeTab = 'yt'"
          href="#yt"
          ><font-awesome-icon :icon="{ prefix: 'fab', iconName: 'youtube' }"
        /></a>
      </li>
      
    </ul>
  </div>
</template>

<script>
export default {
  name: "NavBar",
  data() {
    return {
      activeTab: "web",
    };
  },
};
</script>

<style scoped>
/* Add your component-specific styles here */
</style>

应用程序.vue：

<template>
  <div id="container">
    <NavBar />
    <div class="tab-content">
      <div
        id="web"
        class="container tab-pane"
        :class="{ active: activeTab === 'web' }"
      >
        <h3 class="text-danger">Web</h3>
        <BaseElements />
        <chart></chart>
      </div>
      <div
        id="flag"
        class="container tab-pane"
        :class="{ active: activeTab === 'flag' }"
      >
        <h3 class="text-light">Country</h3>
      </div>
    </div>
  </div>
</template>

<script>
import "bootstrap/dist/css/bootstrap.min.css";
import NavBar from "./components/navBar.vue";
import BaseElements from "./components/BaseElements.vue";
import BarChart from "./components/BarChart";

export default {
  name: "App",
  components: {
    NavBar,
    BaseElements,
    chart: BarChart,
  },
  data() {
    return {
      activeTab: "web",
    };
  },
  methods: {
    handler() {
      var args = arguments;
      for (var arg of args) {
        if (arg instanceof Function) {
          arg();
        }
      }
    },
  },
};
</script>

<style>
body {
  margin: 0;
  background-color: #002a53 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}
</style>

不确定为什么选项卡内容没有被更改。

Answer 1

我昨天给出了非常相似的答案。

大多数情况下，这里的 Bootstrap 只是一个 CSS 框架。它与 VueJS 的反应系统没有任何关系。您主要拥有一个视觉框架，而不是一个可以与之交互的框架。为此，你应该使用

bootstrap-vue

但该项目已经死了。

总的来说，正如我的其他答案中所述：使用任何其他有活跃社区且与 Vue3 配合良好的 UI 库，有很多！