SHARE
TWEET

Untitled

a guest Apr 18th, 2019 60 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.   <q-select
  3.     v-model="computedModel"
  4.     v-bind="childProps"
  5.     @filter="filter"
  6.   >
  7.     <slot
  8.       v-for="(_, name) in $slots"
  9.       :slot="name"
  10.       :name="name"
  11.     />
  12.     <template
  13.       v-for="(_, name) in $scopedSlots"
  14.       :slot="name"
  15.       slot-scope="slotData"
  16.     >
  17.       <slot
  18.         :name="name"
  19.         v-bind="slotData"
  20.       />
  21.     </template>
  22.   </q-select>
  23. </template>
  24.  
  25. <script>
  26. /* eslint-disable vue/require-default-prop */
  27.  
  28. import QSelect from 'quasar/src/components/select/QSelect.js';
  29.  
  30. export default {
  31.   props: { ...QSelect.options.props },
  32.   data() {
  33.     return {
  34.       childProps: null,
  35.     };
  36.   },
  37.   computed: {
  38.     computedModel: {
  39.       get() {
  40.         const needle = this.value;
  41.         const valueKey = this.childProps.optionValue || 'value';
  42.         if (this.value && this.childProps.multiple && this.childProps.emitValue) {
  43.           return this.options.filter(v => needle.includes(v[valueKey]));
  44.         }
  45.         if (this.value && this.childProps.emitValue) {
  46.           return this.options.filter(v => needle === v[valueKey])[0];
  47.         }
  48.         return this.value;
  49.       },
  50.       set(val) {
  51.         if (val && this.childProps.multiple && this.childProps.emitValue) {
  52.           this.$emit('input', val.map((v) => {
  53.             const valueKey = this.childProps.optionValue || 'value';
  54.             return v[valueKey] || v;
  55.           }));
  56.         } else {
  57.           this.$emit('input', val);
  58.         }
  59.         this.childProps.options = [...this.options];
  60.       },
  61.     },
  62.   },
  63.   watch: {
  64.     options(val) {
  65.       this.childProps.options = [...val];
  66.     },
  67.   },
  68.   created() {
  69.     this.childProps = { ...this.$props };
  70.   },
  71.   methods: {
  72.     filter(val, update, next) {
  73.       update(() => {
  74.         if (val === '') {
  75.           this.childProps.options = [...this.options];
  76.         } else {
  77.           const needle = val.toLowerCase();
  78.           const key = this.optionLabel || 'label';
  79.           this.childProps.options = this.options.filter((v) => {
  80.             if (typeof v === 'string') {
  81.               return v.toLowerCase().indexOf(needle) > -1;
  82.             }
  83.             return v[key].toLowerCase().indexOf(needle) > -1;
  84.           });
  85.         }
  86.         next();
  87.       });
  88.     },
  89.   },
  90. };
  91. </script>
  92.  
  93. <style scoped>
  94.  
  95. </style>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top