

[BootstrapVueのサイト](https://bootstrap-vue.org/docs/components/table#complete-
example)にある"Complete example"のサンプルを利用したいのですがうまく表示されません。  
特にソート・フィルターなどの表以外の部分でサンプルの表示と異なります。  
どうやらb-form-selectが上手く表示されていないようなので[そちらのサンプル](https://bootstrap-
vue.org/docs/components/form-select#comp-ref-b-form-
select)も試しましたがやはりサンプルと同じように表示されません。

以下作業内容とソースになります。間違っていそうなところがないかご確認いただけないでしょうか？

  1. パッケージの作成

`vue create paging-table`  
※Vue2を選択しております。

  2. パッケージのインストール

`npm install bootstrap bootstrap-vue`

  3. パッケージの内容

[code]

        {
          "name": "paging-table",
          "version": "0.1.0",
          "private": true,
          "scripts": {
            "serve": "vue-cli-service serve",
            "serve:backend": "node ./src/server.js",
            "build": "vue-cli-service build",
            "lint": "vue-cli-service lint"
          },
          "dependencies": {
            "axios": "^0.27.2",
            "bootstrap": "^5.1.3",
            "bootstrap-vue": "^2.22.0",
            "core-js": "^3.8.3",
            "express": "^4.18.1",
            "vue": "^2.6.14",
            "vue-router": "^3.5.1",
            "vuex": "^3.6.2"
          },
          "devDependencies": {
            "@babel/core": "^7.12.16",
            "@babel/eslint-parser": "^7.12.16",
            "@vue/cli-plugin-babel": "~5.0.0",
            "@vue/cli-plugin-eslint": "~5.0.0",
            "@vue/cli-plugin-router": "~5.0.0",
            "@vue/cli-plugin-vuex": "~5.0.0",
            "@vue/cli-service": "~5.0.0",
            "eslint": "^7.32.0",
            "eslint-config-prettier": "^8.3.0",
            "eslint-plugin-prettier": "^4.0.0",
            "eslint-plugin-vue": "^8.0.3",
            "prettier": "^2.4.1",
            "sass": "^1.32.7",
            "sass-loader": "^12.0.0",
            "vue-template-compiler": "^2.6.14"
          }
        }
    
[/code]

  4. main.jsの編集

[code]

        import Vue from "vue";
        import App from "./App.vue";
        import router from "./router";
        import store from "./store";
        
        Vue.config.productionTip = false;
        
        import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
        
        // Import Bootstrap and BootstrapVue CSS files (order is important)
        import "bootstrap/dist/css/bootstrap.css";
        import "bootstrap-vue/dist/bootstrap-vue.css";
        
        // Make BootstrapVue available throughout your project
        Vue.use(BootstrapVue);
        // Optionally install the BootstrapVue icon components plugin
        Vue.use(IconsPlugin);
        
        new Vue({
          router,
          store,
          render: (h) => h(App),
        }).$mount("#app");
    
[/code]

  5. AboutView.vueの編集  
[BootstrapVueのサイト](https://bootstrap-vue.org/docs/components/table#complete-
example)のサンプルをそのままコピペしました。


CC BY-SA 4.0
2022-07-18T15:20:57.673
90065
2022-07-19T12:54:39.667
2022-07-19T05:08:33.147
29826
53585
question
node.js vue.js bootstrap form
BootstrapVueでサンプル(特にb-form-select)がうまく表示できない。


ごめんなさい。解決いたしました。

BootstrapVueの公式サイトにあるサンプルは編集が可能です。で、ここで自分のコードをコピペしてみたのですが当然上手く表示されるわけです（そもそもサンプルをコピペしているので）。

そこで改めて[Getting Started](https://bootstrap-
vue.org/docs)に立ち直ってみたところ、初っ端のメジャーバージョンが4になっていました。  
さて、皆様お気づきだと思いますがpackeage.jsonを見てみると5になっています。  
そこでサイトのバージョンに合わせるとサンプルと同様に表示されました。安心しました。

くだらない質問になってしまい申し訳ございません。


CC BY-SA 4.0
2022-07-19T12:54:39.667
90086
2022-07-19T12:54:39.667
53585
90065
answer