Nuxt.js form submits with every data change

Question

I have this form:

<template>
    <div class="flex flex-col mt-[5rem] gap-4 p-4 items-center max-w-4xl mx-auto">      
        <form id="inquiry" class="flex flex-col gap-4 w-full" @submit.prevent="submitHandler">
            <label for="name">Name</label>
            <input class="input" type="text" name="name" v-model="formData.name" @input="saveFormData">
            <label for="email">Email</label>
            <input class="input" type="email" name="email" v-model="formData.email" @input="saveFormData">
            <label for="message">Message</label>
            <textarea class="input" name="message" id="message" cols="30" rows="10" v-model="formData.message"
                @input="saveFormData"></textarea>
            <h2 v-if="message">{{ message }}</h2>
            <button type="submit" class="btn" :disabled="message === 'Loading...'">Submit</button>
        </form>
    </div>
</template>

<script setup lang="ts">

const message = ref('');
const formData = reactive({
    name: '',
    email: '',
    message: ''
});

const loadFormData = () => {
    const savedData = localStorage.getItem('inquiryFormData');
    if (savedData) {
        const parsedData = JSON.parse(savedData);
        formData.name = parsedData.name || '';
        formData.email = parsedData.email || '';
        formData.message = parsedData.message || '';
    }
};

const saveFormData = () => {
    localStorage.setItem('inquiryFormData', JSON.stringify(formData));
};

const clearFormData = () => {
    localStorage.removeItem('inquiryFormData');
};

onMounted(() => {
    loadFormData();
});

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

    const { data: res } = await useFetch("***", {
        method: "POST",
        query: {
            websiteId: "***",
            formGroupId: "***"
        },
        body: formData
    });

    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();
};


</script>

Once I submit, a second submit is sent with the fields blank. If I don't clear the fields, every change to a field triggers another submit. It seems that the handler is watching for field changes. When I log every time the handler is called, it's only called once, but the data is sent multiple times.

Answer 1

useFetch automatically watches params change. That's why when the form fields are cleared, another trigger happens.
The solution is just adding watch: false in the useFetch options.

Documentation