開発Divのeciです。
Vue良いですね。Vue
今回はNuxt.jsでBootstrap4（Bootstrap-Vue）を使ってみようと思います！
なぜBootstrapなのかですか？
今はVueを勉強中なので、デザインは使い慣れたもの一択だっただけです...
前回と同様に、Nuxt.jsのインストールから始めます。 「HelloWorld」大切です。
では、行きましょう
下準備
ディレクトリを作成
$ mkdir hello-bv $ cd hello-bv
package.jsonの作成
helloディレクトリ直下にpackage.jsonを作ります。
{ "name": "hello-bv", "scripts": { "dev": "nuxt" } }
Nuxt.jsのインストール
npm install --save nuxt
最初のページを作成
$ mkdir pages $ cd pages
pagesディレクトリに、index.vueを作ります。
<template> <div class="container"> <h1>hello-bv</h1> </div> </template>
起動
$ npm run dev
ブラウザで「localhost:3000」に行くと、「hello-bv」と表示されると思います。
ここからが今回のメインです。
Bootstrap-Vue
Bootstrap-Vueのインストール
$ npm install bootstrap-vue
たったこれだけで準備は完了です。
試しにindex.vueを変えてみましょう
page/index.vueの編集
Badgeを追加してみます。
<template> <div class="container"> <h1>hello-bv <b-badge>New!</b-badge> </h1> </div> </template>
起動
$ npm run dev
「New!」のBadgeが表示されましたか？されましたよね？されたとしましょう。
本当はココまでだったのですが、査読者に怒られてしまいましたので、もう少し頑張ります
Table表示編
データの作成
まずはデータを作りましょう。
index.vueのscriptタグにitems配列だけを返す、dataメソッドを定義します。
<script> export default { data: () => { return { items: [ {id:1, name: 'みかん', price: 1000, stock: true}, {id:2, name: 'りんご', price: 2000, stock: true}, {id:3, name: 'いちご', price: 800, stock: false}, {id:4, name: 'メロン', price: 5000, stock: true}, ], } } } </script>
テーブルの定義
index.vueのtemplate部分を↓のように書き換えます。
<b-table>タグを追加するだけです。
<template> <div class="container"> <h1>hello-bv <b-badge>New!</b-badge> </h1> <b-table :items="items"> </b-table> </div> </template>
いかがですか？
たったこれだけでテーブル表示も出来てしまいました！
表示されるカラムを定義する
上記のようにitemsの全てのカラムを表示する場合は今のままでいいのですが、
各カラムの表示／非表示を制御したり、フォーマットを変更したい時は、↓のようにします。
<script> export default { data: () => { return { fields:[ {key: "id"}, {key: "name"}, {key: "price"}, {key: "stock"}, ], items: [ {id:1, name: 'みかん', price: 1000, stock: true}, {id:2, name: 'りんご', price: 2000, stock: true}, {id:3, name: 'いちご', price: 800, stock: false}, {id:4, name: 'メロン', price: 5000, stock: true}, ], } } } </script>
次に、<b-table>タグに、「:fields="fields"」を追加してください。
<template> <div class="container"> <h1> hello-bv <b-badge>New!</b-badge> </h1> <b-table :items="items" :fields="fields"> </b-table> </div> </template>
これまでと変わりなく表示されていると思います。
もう少し頑張ります
見出し行を変える
このままですと、日本人にあまり優しくないです。
日本人フレンドリーに見出し行を変えてみましょう。
<template> <div class="container"> <h1>hello-bv <b-badge>New!</b-badge> </h1> <b-table :items="items" :fields="fields"> <template slot="HEAD_name" slot-scope="data"> 名前 </template> <template slot="HEAD_price" slot-scope="data"> 価格 </template> <template slot="HEAD_stock" slot-scope="data"> 在庫 </template> </b-table> </div> </template>
日本人に優しくなりましたか？
ただ、このままですとまだ職場の先輩に怒られてしまいます。
数字項目の部分を修正しましょう。
金額項目の対応を行う
3桁ごとにカンマを入れて、右寄せします。
fieldsのpriceカラムの設定のところに、formatterメソッドとtdClassを定義します。
<script> export default { data: () => { return { fields:[ {key: "id"}, {key: "name"}, {key: "price", formatter:(value)=> { return value.toLocaleString() }, tdClass: "text-sm-right" }, {key: "stock"}, ], items: [ {id:1, name: 'みかん', price: 1000, stock: true}, {id:2, name: 'りんご', price: 2000, stock: true}, {id:3, name: 'いちご', price: 800, stock: false}, {id:4, name: 'メロン', price: 5000, stock: true}, ], } } } </script>
在庫カラムを修正する
<script> export default { data: () => { return { fields:[ {key: "id"}, {key: "name"}, {key: "price", formatter:(value)=> { return value.toLocaleString() }, tdClass: "text-sm-right" }, {key: "stock", formatter:(value)=> { return value ? "あり" : "なし" }, }, ], items: [ {id:1, name: 'みかん', price: 1000, stock: true}, {id:2, name: 'りんご', price: 2000, stock: true}, {id:3, name: 'いちご', price: 800, stock: false}, {id:4, name: 'メロン', price: 5000, stock: true}, ], } } } </script>
完成です！
ドヤ顔で先輩に出来ました報告してみてください。
まとめ
Bootstrap-Vueは、ドキュメントもかなり揃っていて、あまり困ることはありませんでした。
実戦投入しても問題ないレベルなのではないでしょうか？
これから色々なComponentを試して行きたいと思います。
