qInput component with 2-ways-bind

[Salim Larhrib]

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.

[dobbel]

@Salim-Larhrib

Here’s an article about events and props in the context of child and parent components in Vue.
https://medium.com/quick-code/vue-communication-patterns-an-intro-to-props-down-and-events-up-pattern-d53340d2c94

You could also extend Qinput in BaseInput.
https://dev.to/fdietz/vue-js-mixins-extending-components-and-high-order-components-2gfb

[Salim Larhrib]

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

[Salim Larhrib]

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