SHARE
TWEET

Untitled

a guest Apr 18th, 2019 63 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.         if (this.value && this.childProps.multiple && this.childProps.emitValue) {
  41.           const needle = this.value;
  42.           return this.options.filter(v => needle.includes(v.value));
  43.         }
  44.         return this.value;
  45.       },
  46.       set(val) {
  47.         if (val && this.childProps.multiple && this.childProps.emitValue) {
  48.           this.$emit('input', val.map((v) => {
  49.             if (v.value) {
  50.               return v.value;
  51.             }
  52.             return v;
  53.           }));
  54.         } else {
  55.           this.$emit('input', val);
  56.         }
  57.         this.childProps.options = [...this.options];
  58.       },
  59.     },
  60.   },
  61.   watch: {
  62.     options(val) {
  63.       this.childProps.options = [...val];
  64.     },
  65.   },
  66.   created() {
  67.     this.childProps = { ...this.$props };
  68.   },
  69.   methods: {
  70.     filter(val, update, next) {
  71.       update(() => {
  72.         if (val === '') {
  73.           this.childProps.options = [...this.options];
  74.         } else {
  75.           const needle = val.toLowerCase();
  76.           const key = this.optionLabel || 'label';
  77.           this.childProps.options = this.options.filter((v) => {
  78.             if (typeof v === 'string') {
  79.               return v.toLowerCase().indexOf(needle) > -1;
  80.             }
  81.             return v[key].toLowerCase().indexOf(needle) > -1;
  82.           });
  83.         }
  84.         next();
  85.       });
  86.     },
  87.   },
  88. };
  89. </script>
  90.  
  91. <style scoped>
  92.  
  93. </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