Buefy 前端框架所提供的 Autocomplete，有一些使用上的邏輯並不是那樣直覺，這邊筆記下這些容易忘記的細節。
內容
1. 選取後觸發的 callback 函式是可以自行定義的
藉由 @select=“Function 內容” 來控制
2. 下拉選單搭配輸入框出現篩選效果，需要在 computed 過濾
也就是傳進去物件中的 :data ，必須要結合你的 v-model 一同使用。v-model 用作追蹤 input 輸入用。例如官網上範例所提到的：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<template> <section> <b-field label="Find a JS framework"> <b-autocomplete v-model="name" :data="filteredDataArray" </b-autocomplete> </b-field> </section> </template> <script> export default { data() { return { data: [ 'Angular', 'Angular 2', 'Aurelia', 'Backbone', 'Ember', 'jQuery', 'Meteor', 'Node.js', 'Polymer', 'React', 'RxJS', 'Vue.js' ], name: '' } }, computed: { filteredDataArray() { return this.data.filter((option) => { return option .toString() .toLowerCase() .indexOf(this.name.toLowerCase()) >= 0 }) } } } </script> |
3. 不要監聽設定為 v-model 的變數
否則使用者每在 input 框輸入時，就會屢屢觸發監聽函式，造成效能瓶頸。在 @select 的 callback 函式中，將選取的值存到某個變數 (例如變數 abc)，然後 watch 這個 abc 的變化
