質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.37%

Bootstrap-vueのTabs(b-tabs)を使用した場合、タブが表示されない

受付中

回答 0

投稿

  • 評価
  • クリップ 1
  • VIEW 1,951

score 12

困っていること

Ruby on Railsのプロジェクト上で、Vue.jsとBootstrap-vueを導入しています。
vue.jsのコンポーネント上でBootstrap-vueの「Tabs」を使用したところ、タブが表示されません。
Bootstrap-vueのボタンなどは正常に使用できるため、bootstrap-vue自体のインポートには成功しているようです。

実現したいこと

タブが正常に表示されるようにしたいです。何か解決法をご存じされば、ご教示いただけると助かります。

環境

・Ruby on Rails v5.2.3
・Vue.js @2.6.10
・Bootstrap-vue @2.0.0-rc.28

実際の画面

本来であれば、「I'm the first tab」の上に、"First","Second","Disabled"のタブが表示されるはずです。
イメージ説明

コード

View(html)ファイル  :tabtest.html.erb
※tab-test.js(vue.jsファイル)を呼び出している

<h1>TabTest</h1>
<div id="tab-test"></div>
<%= javascript_pack_tag 'tab-test.js' %>

vue.jsファイル     :tab-test.js
※tabtest.vue(コンポーネントファイル)をインポートし、htmlの#tab-testに割り当てている。

import Vue from 'vue/dist/vue.esm';

import TabTest from './components/tabtest.vue'

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue);

new Vue({
  el: "#tab-test",
  components: { TabTest },
  template: '<tab-test></tab-test>',
})


コンポーネントファイル:tabtest.vue
Bootstrap-vueの「Tabs」を使用。
(bootstrap-vueの動作確認用として配置したb-buttonは正常に動作している)

<template>
  <div>
    <b-tabs>
      <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>

    <b-button>Button</b-button>
  </div>
</template>

コードの参考にした資料

Bootstrap-vueの公式ページ(https://bootstrap-vue.js.org/docs/components/tabs)

やったこと

ネット上で同現象を調べたのですが、同現象が発生している事例・解決法ともに見つけることができませんでした。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る