Why doesn't the post method work in my Vue.js Project?

Question

I have a page in my Vue.ja project where you add products to the database in JSON Server. Howevwe, when I fill up the form, the data does not change. Below is the code:

<template>
    <form action="" @submit.prevent="submit">
        <input type="text" placeholder="Product Name" name="name" v-model="name">
        <input type="number" name="" id="" placeholder="Price in USD" v-model="price">
        <input type="button" value="Add Product">
    </form>
</template>

<script>
import { ref } from "vue";
import { useRouter } from "vue-router";

export default {
    name: "ProductCreate",
    setup() {
        const name = ref("");
        const price = ref("");
        const router = useRouter();

        const submit = async () => {
            await fetch("http://localhost:3000/products", {
                method: "POST",
                headers: { "Content-type": "application/json" },
                body: JSON.stringify({ id: (Math.random() * 10000000000000000n), name: name.value, price: price.value })
            });
            await router.push("admin/products");
        };

        return { name, price, submit };
    }
};
</script>

Why doesn't it work?

Answer 1

The add button should of type submit

<input type="submit" value="Add Product">
              👆