BootstrapVue 用法，Form select 跟 Form spinbutton

替自己有用到的地方做個紀錄。


    首先先導入，參考官網連結 https://bootstrap-vue.org/docs ，結合 Bootstrap 跟 Vue.js 的套件，

雖然不用 jQuery 的好處還不明顯，但在六角的課程都學了 Bootstrap 跟 Vue.js 就學一下。

在 VSCode中，用快捷鍵 Ctrl + ` 叫出終端機，在專案資料夾底下輸入：


npm install vue bootstrap-vue bootstrap


然後就裝完了，接著在 Vue 的專案裡面 main.js 裡面作 import


import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'


通常上面那行會有，下面就是 import 剛剛安裝的 BootstrapVue，後面是附的 Icon，可加可不加。

Vue裡面的套件需要先use，不然會報錯，所以加入下面兩行，Icon一樣可有可無：


Vue.use(BootstrapVue)
Vue.use(IconsPlugin)


CSS 方法是用 SCSS，容後再提。

這個套件我覺得最大的優勢是元件不太需要大改就有蠻完整的功能，這邊介紹兩個我有用到的：

Form select 跟 Form spinbutton。


Form select 

在官網的文件中提供的範例：

 可以看到，簡單的使用 v-model 同步選項的 value 以方便送出表單，並且可以在 data 中設定預設值 value， 如：(多餘的code省略)

 透過預設值的方法可以提升使用者體驗。

Form spinbutton 

就是可以按箭頭跳數字的功能，下面是我複製貼上改的，自己乖乖寫要寫：減號按鈕、顯示值、加號按鈕，三個東西，但是這個套件複製貼上一行搞定。 

我寫的內容如下： 

抄回來之後可以看到可以對數量作 v-model 的即時更新，可以限制中間數字欄的最大最小值，並且一樣可以透過 v-model 設定預設值，

@change是我需要把按過按鈕更新過的數量立刻更新 API 上的資料。

最後要補充一個地方，這個東西的寬度預設是 width:100% ，但是可以自動變大變小，如果要手動調整大小，要用 HTML 標籤包起來作調整。

如： 

 

col-8 是 Bootstrap 中， CSS 的格線系統，寬度大約等於所在位置寬度的 8/12，當然也可以選擇固定值或其他。