BootstrapVue 學習心得

驗證 form 元素範例

<BFormInput :id="input-name" placeholder="請選擇" v-model="name" :state="!name? false:null"></BFormInput>

<BFormInvalidFeedback :id="input-name-feedback">請輸入姓名</BFormInvalidFeedback>

參考來源

下拉選單分群

選項資料用 label 搭配 options 餵給 b-form-select，label 就是群組名稱

ex.

後端

活動s.Where(a => a.時間 >= DateTime.Today.FirstDayOfMonth()).OrderBy(a => a.時間).ToList().GroupBy(a=>a.時間.FirstDayOfMonth()).Select(a=>new { label=a.Key.ToString("yyyy/M"), 

options=a.Select(b => new { value = b.id, text = b.content }).ToList() })

前端

<b-form-select v-model="活動" :options="活動s"></b-form-select>

讓 bootstrapvue toast 顯示 html or 替換內容

javascript

this.提醒訊息 ='aaa<br>bbb';

this.$bvToast.show('toast提醒訊息');

html

<b-toast id="toast提醒訊息" title="提醒訊息" variant="warning" solid no-auto-hide>

        <div v-html='提醒訊息'></div>

</b-toast>