Aquí tengo ModalName.vue de dos componentes, que es un componente secundario y AddTask.vue que es un componente principal. Dentro ModalName.vue (componente secundario) si emito un evento sobre el cambio de entrada usando el elemento HTML <input /> para actualizar el estado en el componente principal, funciona perfectamente, pero si uso el componente quasar , es decir, <q-input /> entonces no emite el evento. ¿Qué tiene de malo este código?
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>Solía funcionar en Quasar v1 de esta manera, pero Quasar v2 (Vue 3) cambió este comportamiento y @input ya no se activa. Esta es la forma de hacerlo ahora:
<q-input :value="name" @update:model-value="newValue => $emit('changeName:name', newValue)" /> También es necesario configurar emits: ['changeName:name']
Referencias:
puede intentar
<q-input :value="name" @input="(val) => $emit('changeName:name', val)" />el parámetro pasado por el evento @input son los datos modificados, no el evento