[指南] Buefy 搭配 Autocomplete 的思考邏輯

Buefy 前端框架所提供的 Autocomplete,有一些使用上的邏輯並不是那樣直覺,這邊筆記下這些容易忘記的細節。
buefy


內容

1. 選取後觸發的 callback 函式是可以自行定義的

藉由 @select=“Function 內容” 來控制

2. 下拉選單搭配輸入框出現篩選效果,需要在 computed 過濾

也就是傳進去物件中的 :data ,必須要結合你的 v-model 一同使用。v-model 用作追蹤 input 輸入用。例如官網上範例所提到的:

3. 不要監聽設定為 v-model 的變數

否則使用者每在 input 框輸入時,就會屢屢觸發監聽函式,造成效能瓶頸。在 @select 的 callback 函式中,將選取的值存到某個變數 (例如變數 abc),然後 watch 這個 abc 的變化


參考資料

1. Buefy – Autocomplete

按讚加入粉絲團

延伸閱讀