Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <template>
- <q-select
- v-model="computedModel"
- v-bind="childProps"
- @filter="filter"
- >
- <slot
- v-for="(_, name) in $slots"
- :slot="name"
- :name="name"
- />
- <template
- v-for="(_, name) in $scopedSlots"
- :slot="name"
- slot-scope="slotData"
- >
- <slot
- :name="name"
- v-bind="slotData"
- />
- </template>
- </q-select>
- </template>
- <script>
- /* eslint-disable vue/require-default-prop */
- import QSelect from 'quasar/src/components/select/QSelect.js';
- export default {
- props: { ...QSelect.options.props },
- data() {
- return {
- childProps: null,
- };
- },
- computed: {
- computedModel: {
- get() {
- const needle = this.value;
- const valueKey = this.childProps.optionValue || 'value';
- if (this.value && this.childProps.multiple && this.childProps.emitValue) {
- return this.options.filter(v => needle.includes(v[valueKey]));
- }
- if (this.value && this.childProps.emitValue) {
- return this.options.filter(v => needle === v[valueKey])[0];
- }
- return this.value;
- },
- set(val) {
- if (val && this.childProps.multiple && this.childProps.emitValue) {
- this.$emit('input', val.map((v) => {
- const valueKey = this.childProps.optionValue || 'value';
- return v[valueKey] || v;
- }));
- } else {
- this.$emit('input', val);
- }
- this.childProps.options = [...this.options];
- },
- },
- },
- watch: {
- options(val) {
- this.childProps.options = [...val];
- },
- },
- created() {
- this.childProps = { ...this.$props };
- },
- methods: {
- filter(val, update, next) {
- update(() => {
- if (val === '') {
- this.childProps.options = [...this.options];
- } else {
- const needle = val.toLowerCase();
- const key = this.optionLabel || 'label';
- this.childProps.options = this.options.filter((v) => {
- if (typeof v === 'string') {
- return v.toLowerCase().indexOf(needle) > -1;
- }
- return v[key].toLowerCase().indexOf(needle) > -1;
- });
- }
- next();
- });
- },
- },
- };
- </script>
- <style scoped>
- </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement