Quasar q-input元素在输入更改时不发出事件（vuejs）

Question

这里我有两个组件 ModalName.vue 是子组件和 AddTask.vue 这是父组件。在ModalName.vue（子组件）内部，如果我使用HTML <input /> 元素在更改输入时发出事件以更新父组件中的状态，它可以完美运行，但如果我使用quasar 组件，即 <q-input /> 然后它不会发出事件。这段代码有什么问题。

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>

Answer 1

可以试试

        <q-input
            :value="name" 
            @input="(val) => $emit('changeName:name', val)"
        />

@input event 传递的参数是改变后的数据，不是事件