Nuxt3：从注册表单中发出输入值

Question

在我的 Nuxt3 应用程序中，我尝试将电子邮件输入字段中输入的值从子组件 (SignForm.vue) 发送到父组件 (signup.vue)，以便我可以使用它来注册新用户

signup.vue

<script setup>
    const props = {
        fields: [
            "email",
            "password",
            "confirm",
        ],
        header: "Register a new account",
        button: [
            {
                text: "Sign Up",
                color: "green-500",
            }
        ]
    };

    const email = ref('');
    const password = ref('');
    const confirm = ref('');

    function signUp(email) {
        console.log(email)
    
    }
</script>

<template>
    <SignForm :props="props" @method="signUp"/>
</template>

SignForm.vue

<script setup>
    const email = ref('');
    const password = ref('');
    const { props } = defineProps(['props']);
</script>

<template>
    <div class="container">
        <form class="flex flex-col items-center gap-2">
            <p class="text-2xl pb-2">{{ props.header }}</p>
            <input v-for="(pf, index) in props.fields" :key="index"
            :type="[`${pf}` === 'confirm' ? 'password' : `${pf}`]"
            :placeholder="`${pf}`"
            :v-model="`${pf}`"
            class="bg-gray-300 rounded p-2 w-2/5"
            >
            <button type="submit" v-for="(btn, index) in props.button" :key="index"
                class="p-2 text-white rounded w-2/5 text-sm opacity-85 hover:font-bold hover:opacity-100"
                :class="`bg-${ btn.color }`"
                @click.prevent="$emit('method', email)"
                >
                <span>{{ btn.text }}</span>
            </button>
        </form>    
    </div>
</template>

电子邮件值仍未按预期发出 - 它要么为空，要么

undefined

Answer 1

这是一个快速复制示例，说明它应该如何工作。

您可以使用 Vue 开发工具进一步检查并尝试找出子组件发出的内容。另外，我认为删除一些

v-for

可能有助于更轻松地调试。

PS：不要将

index

用作

:key

。

---

我实际上认为你的问题在于你期望从孩子那里得到

email

，但是你有来自父母的本地

email

。因此，您可能会按预期收到

$event

，但您正在

console.log

处理空的本地。

请尝试

<SignForm :props="props" @method="console.log($event)" />

在这种情况下，

$event

应该是孩子发出的电子邮件

ref

。