Nuxt.js表单存在重复提交及二次空提交异常问题

问题根源 #

你碰到的问题是useFetch的响应式特性导致的：

• useFetch默认会监听传入参数里的响应式依赖，当你把响应式的formData作为请求body传入后，任何formData的字段变化（比如提交后清空字段、后续修改输入内容）都会触发useFetch自动重新发送请求。
• 哪怕submitHandler只执行一次，useFetch也会因为依赖变更发起新请求，这就造成了提交后的二次空请求，以及修改字段时的自动提交。

修复方法 #

方法1：传递表单数据的快照（最简便） #

在调用useFetch时，把响应式的formData转换成普通对象，让useFetch无法追踪原对象的变化：

const submitHandler = async () => {
    if (message.value === 'Loading...') return; 
    message.value = 'Loading...';

    // 用展开运算符生成普通对象快照
    const formSnapshot = { ...formData };
    const { data: res } = await useFetch("***", {
        method: "POST",
        query: {
            websiteId: "***",
            formGroupId: "***"
        },
        body: formSnapshot // 传递快照而非原响应式对象
    });

    const responseMessage = (res.value as any).message;
    message.value = responseMessage === "success"
        ? "Thank you for your inquiry! We will reach out to you shortly."
        : "Something went wrong. Please try again later.";

    formData.name = '';
    formData.email = '';
    formData.message = '';
    clearFormData();
};

方法2：手动控制请求触发 #

如果需要更灵活的请求控制，可以关闭useFetch的自动触发，手动调用执行函数：

// 先定义useFetch，设置immediate: false禁止自动触发
const { data: res, execute } = useFetch("***", {
    method: "POST",
    query: {
        websiteId: "***",
        formGroupId: "***"
    },
    body: formData,
    immediate: false
});

const submitHandler = async () => {
    if (message.value === 'Loading...') return; 
    message.value = 'Loading...';

    // 手动执行请求
    await execute();

    const responseMessage = (res.value as any).message;
    message.value = responseMessage === "success"
        ? "Thank you for your inquiry! We will reach out to you shortly."
        : "Something went wrong. Please try again later.";

    formData.name = '';
    formData.email = '';
    formData.message = '';
    clearFormData();
};

验证效果 #

修改后，提交表单只会发送一次请求，清空字段或后续修改输入内容时，不会再触发额外的请求，完全符合预期逻辑。

内容的提问来源于stack exchange，提问作者Jacob Miller