Home>
Contents of question

For apps being created with Vue.jsBootstrap Vue Introduced,tabI want to be able to use content that uses.
Currently, the tab itself is displayed, but clicking on a different tab does not switch.

If i use normal Bootstrap, it will not work unless you enable Jquery, but in the case of BootstrapVue, it says "Jquery is unnecessary", but even if you install it with the following procedure, tabs Switching did not work.

Getting Started | Bootstrap Vue

jQuery is not required

How do I get tab switching to work?
I look forward to working with you.

environment
  • Vue.js 2
  • vue-cli 2.9.6
  • Bootstrap 4
Reproduction procedure
vue create vue_sample
cd vue_sample
npm install bootstrap-vue
npm run serve

Of the templates created by the above commandmain.jsWhenApp.vueOnly modified as follows.

main.js

import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
import {BootstrapVue, BootstrapVueIcons} from "bootstrap-vue";
import App from "./App.vue";
import Vue from "vue";
Vue.use (BootstrapVue);
Vue.use (BootstrapVueIcons);
Vue.config.productionTip = false;
new Vue ({{
  render: h =>h (App)
}). $Mount ("# app");

App.vue

<template>
  
  <!-Tab header->
  <ul>
    <li>
         Tab 1 
    </li>
    <li>
         Tab 2 
    </li>
  </ul>
  <!-Tab content->
    
       Tab 1 content 
       Tab 2 content 
    
  
</template>
<script>
export default {
  name: "App",
};
</script>

By the way, when using normal Bootstrap, it worked if I also enabled Jquery.

<! DOCTYPE html>
<head>
  <meta charset = "utf-8" />
  <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
  <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
  <!-Tab header->
  <ul>
      <li>
             Tab 1 
      </li>
      <li>
             Tab 2 
      </li>
  </ul>
  <!-Tab content->
    
         Tab 1 content 
         Tab 2 content 
    
    
</body>
</html>
Solutions

I modified it as follows and it worked.

App.vue

<template>
  
    
    <b-tabs content-class = "mt-3">
      <b-tab title = "First" active><p>I'm the first tab</p></b-tab>
      <b-tab title = "Second"><p>I'm the second tab</p></b-tab>
      <b-tab title = "Disabled" disabled><p>I'm a disabled tab!</P></b-tab>
    </b-tabs>
    
  
</template>
<script>
export default {
  name: "App",
};
</script>
  • Answer # 1

    Bootstrap Vue componentb-It seems to start from.

    Now that I'm loading css, the design will change,
    I don't use component, so I think it's not working.

    https://bootstrap-vue.org/docs/components/tabs