[筆記] Vuetify select autocomplete 套件限制多選數量

章節連結

在使用 Vuetify 前端框架開發時,當要給使用者進行「多選」需求時,偶會遇上「限制使用者選取數量」的情境。不過這功能目前 Vuetify 官方並沒有給出官方解法,於是嘗試自己用 Vuetify 所提供的既有功能湊出一個。
vuetify


邏輯

1. dropdown 本身的設定檔中,給兩個 key,分別儲存最大選擇數量 和 menuProps 的開關狀態
2. 計算使用者究竟點了多少數量 – 儲存使用者點選內容的 array 和 下拉列表清單的 array 作比對
3. 每次觸發 input 事件時,檢查是否抵達上限。如果抵達上限,那就將下拉選單關閉
4. 開啟 chip 的 “x” 按鈕,讓使用者縱使在達到選取上限後,還有反向操作的可能
5. 當執行 “x” 按鈕移除一個選擇時,一樣要執行選取數量檢查

程式碼

詳見 CodeSandbox:https://codesandbox.io/s/vuetify-2-select-autocomplete-limit-choices-guow5

按讚加入粉絲團

延伸閱讀