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

錯誤訊息.value = 錯誤訊息.replaceAll('\n', '<br>');

顯示錯誤訊息視窗.value = true;

html

<Teleport to="body">

    <div class="toast-container position-fixed top-0 end-0">

        <BToast v-model="顯示錯誤訊息視窗" variant="danger" title="發生錯誤" auto-hide="false">              <div v-html='錯誤訊息'></div>

        </BToast>

    </div>

</Teleport>