Hi,
Nice job. In hurry to discover…
Thanks!!

Hi,
A few days ago, I have discovered this wonderful framework. I thank you for crazy energy you deploy everyday.
Regards.

Hi everybody,
I have created a Q-Select component which filters array of objects.

<template>
  <q-select
    class="custom-selection"
    dense options-dense use-input
    v-model="innerValue"
    v-bind="$attrs"
    v-on="$listeners"
    :options="stringOptions"
    filter @filter="HandleFilter"
    hint="Minimum 3 characters to run filter"
  ></q-select>
</template>

Because of :options is binded to array of objects, I cannot use the quasar example filter. I have tried to do my own but I cannot access to this.$attrs.optionValue. Can somebody tell me how to reach this property or I have to bind it by hand in the props array ???

<script>
export default {
  name: 'SelectFilter',
  props: ['value', 'options'],
  data () {
    return {
      stringOptions: null
    }
  },
  computed: {
    innerValue: {
      get () {
        return this.value
      },
      set (value) {
        this.$emit('input', value)
      }
    }
  },
  methods: {
    HandleFilter (val, update, abort) {
      if (val.length < 3) {
        abort()
        return
      }
      update(() => {
        const needle = val.toLowerCase()
        this.stringOptions = this.options.filter(
          v => v[this.$attrs.optionValue].toLowerCase().indexOf(needle) > -1
        )
      })
    }
  }
}

Thank you.

Hello,
Again another example to simplify 2 ways bindings thanks to computed getter and setter. https://tahazsh.com/vuebyte-computed-setters
Regards.

Hi Dobbel,
Thank you for your links. I will take a look to mixins to extend existing Quasar components.
I have also found a very interesting post which purposes a better solution with computed functions to manage the local v-model innerValue : https://forum.quasar-framework.org/topic/3208/adding-custom-functionality-to-quasar-s-components

Hi all,
I have discovered Quasar 2 days ago and have started to play with. I need to do 2-ways-bind between a vue3 page and an included q-input descendant.
It took time but it works. I need an advice if there is a better solution or my way to do is the right one.
To be short, I have created a local v-model in the component and made a main model update with an emit event.

<template>
  <div>
    <q-input
      class="col-md-2"
      v-model="innerValue"
      :label="pLabel"
      :placeholder="pPlaceholder"
      dense
      @input="updateValue($event)"
    />
  </div>
</template>

<script>
export default {
  name: 'BaseInput',
  props: {
    modelValue: {
      type: [String, Number],
      default: '',
      required: true
    },
    pLabel: {
      type: String,
      required: true
    },
    pPlaceholder: {
      type: String,
      default: ''
    },
    pType: {
      type: String,
      default: 'text'
    },
    pIcon: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      innerValue: this.modelValue
    }
  },
  methods: {
    updateValue () {
      this.$emit('input', this.innerValue)
    },
    handleChange () { console.log('Change event') }
  },
  model: {
    // Quasar components waits "value" property when Vue3 sends "modelValue"
    // though v-model call.
    // We translate "value" property to "modelValue"
    type: String,
    prop: 'modelValue'
  }
}

To use the BaseInput component, I include it in my template like this:

<!-- Field Start Date -->
<BaseInput
  v-model="dName"
  label="User Name "
  placeholder="Insert unique user name"
/>
....
  data () {
    return {
      dName: 'Tartempion',
.....

I am Waiting for your comments and nice advices to improve this 2-ways binding solution.
Thanks to all.