fix: use vue3 v-model bindings
see: https://v3.vuejs.org/guide/migration/v-model.html
This commit is contained in:
parent
2ef2bb7700
commit
51a740f53c
29 changed files with 114 additions and 96 deletions
|
|
@ -83,14 +83,6 @@
|
|||
<script>
|
||||
import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
|
||||
|
||||
/**
|
||||
* Available events:
|
||||
* @search: Triggered every time the search query input changes
|
||||
* @select: Triggered every time an option from the search results is selected. Also triggers a change in v-model.
|
||||
* @create: If nothing or no exact match was found and `creatable` is true, this event is triggered with the current value of the search query.
|
||||
* @remove: If `multiple` is enabled, this will be fired every time an item is removed from the array of selected items.
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: 'multiselect',
|
||||
data() {
|
||||
|
|
@ -133,7 +125,7 @@ export default {
|
|||
},
|
||||
},
|
||||
// The object with the value, updated every time an entry is selected.
|
||||
value: {
|
||||
modelValue: {
|
||||
default() {
|
||||
return null
|
||||
},
|
||||
|
|
@ -188,6 +180,16 @@ export default {
|
|||
},
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* Available events:
|
||||
* @search: Triggered every time the search query input changes
|
||||
* @select: Triggered every time an option from the search results is selected. Also triggers a change in v-model.
|
||||
* @create: If nothing or no exact match was found and `creatable` is true, this event is triggered with the current value of the search query.
|
||||
* @remove: If `multiple` is enabled, this will be fired every time an item is removed from the array of selected items.
|
||||
*/
|
||||
emits: ['update:modelValue', 'search', 'select', 'create', 'remove'],
|
||||
|
||||
mounted() {
|
||||
document.addEventListener('click', this.hideSearchResultsHandler)
|
||||
},
|
||||
|
|
@ -195,7 +197,7 @@ export default {
|
|||
document.removeEventListener('click', this.hideSearchResultsHandler)
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
modelValue: {
|
||||
handler(value) {
|
||||
this.setSelectedObject(value)
|
||||
},
|
||||
|
|
@ -278,7 +280,7 @@ export default {
|
|||
this.internalValue = object
|
||||
}
|
||||
|
||||
this.$emit('input', this.internalValue)
|
||||
this.$emit('update:modelValue', this.internalValue)
|
||||
this.$emit('select', object)
|
||||
this.setSelectedObject(object)
|
||||
this.closeSearchResults()
|
||||
|
|
@ -352,7 +354,7 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
this.$emit('input', this.internalValue)
|
||||
this.$emit('update:modelValue', this.internalValue)
|
||||
this.$emit('remove', item)
|
||||
},
|
||||
focus() {
|
||||
|
|
|
|||
Reference in a new issue