You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
40 lines
944 B
40 lines
944 B
export default { |
|
props: ["options"], |
|
template: ` |
|
<q-select |
|
ref="qRef" |
|
v-bind="$attrs" |
|
:options="filteredOptions" |
|
@filter="filterFn" |
|
> |
|
<template v-for="(_, slot) in $slots" v-slot:[slot]="slotProps"> |
|
<slot :name="slot" v-bind="slotProps || {}" /> |
|
</template> |
|
</q-select> |
|
`, |
|
data() { |
|
return { |
|
initialOptions: this.options, |
|
filteredOptions: this.options, |
|
}; |
|
}, |
|
methods: { |
|
filterFn(val, update, abort) { |
|
update(() => { |
|
const needle = val.toLocaleLowerCase(); |
|
this.filteredOptions = needle |
|
? this.initialOptions.filter((v) => String(v.label).toLocaleLowerCase().indexOf(needle) > -1) |
|
: this.initialOptions; |
|
}); |
|
}, |
|
}, |
|
watch: { |
|
options: { |
|
handler(newOptions) { |
|
this.initialOptions = newOptions; |
|
this.filteredOptions = newOptions; |
|
}, |
|
immediate: true, |
|
}, |
|
}, |
|
};
|
|
|