qInput component with 2-ways-bind
-
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. -
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-d53340d2c94You could also extend Qinput in BaseInput.
https://dev.to/fdietz/vue-js-mixins-extending-components-and-high-order-components-2gfb -
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 -
Hello,
Again another example to simplify 2 ways bindings thanks to computed getter and setter. https://tahazsh.com/vuebyte-computed-setters
Regards.