Here I've two-component ModalName.vue which is a child component and AddTask.vue which is parent component. Inside ModalName.vue (Child component) if I emit an event on change of input using HTML <input /> element to update the state in the parent component, it works perfectly but if I use quasar component i.e.
<q-input /> then it doesn't emit the event. What's wrong with this code.
ModalName.vue
<template>
<div class="row q-mb-sm">
<!-- <input :value="name" @input="$emit('changeName:name', $event)"/> -->
<q-input
:value="name"
@input="$emit('changeName:name', $event)"
/>
</div>
</template>
<script>
export default {
props: ["name"],
}
</script>
AddTask.vue
<template>
<ModalName
v-model:name="taskToSubmit.name"
@changeName:name="(e)=>taskToSubmit.name = e.target.value"
/>
</template>
<script>
export default {
data(){
return{
taskToSubmit:{
name: '',
dueDate: '',
dueTime: '',
completed: false
}
}
},
components:{
ModalName: require('./shared/ModalName.vue').default
}
}
</script>
It used to work on Quasar v1 like this but Quasar v2 (Vue 3) changed this behavior and @input is not triggered anymore. This how to do that now:
<q-input
:value="name"
@update:model-value="newValue => $emit('changeName:name', newValue)"
/>
It is also required to set emits: ['changeName:name']
Refs.:
May try
<q-input
:value="name"
@input="(val) => $emit('changeName:name', val)"
/>
the parameter passed by @input event is the changed data, not event