Vuejs select option submits the form

Question

I am using vuesax 4 and I have select options in my form but each time I select an option it submits my form! how to prevent that of happening?

Code

HTML

<form
    class="mt-2"
    ref="form"
    :model="form"
    enctype="multipart/form-data"
>
    <vs-select
        :key="tags.length"
        filter
        :label="$t('posts.tags')"
        v-model="form.tags"
        multiple
    >
        <vs-option
        v-for="tag in tags"
        :key="tag.id"
        :label="tag.name"
        :value="tag.id"
        >
        {{ tag.name }}
        </vs-option>
    </vs-select>

    <vs-button @click="onSubmit" native-type="submit" gradient>
        {{ $t("posts.save") }}
    </vs-button>
</form>

SCRIPT

data() {
    return {
      categories: [],
      tags: [],
      form: {
        name: "",
        slug: "",
        image: "",
        icon: "",
        body: "",
        online: "",
        template: "",
        quote: "",
        video: "",
        tags: [],
        categories: [],
        metaTags: [],
        metaDescription: "",
      },
    };
},
mounted() {
   this.fetchTags();
},
methods: {
    fetchTags() {
      axios
        .get("/api/admin/tags", {
          headers: {
            Authorization: localStorage.getItem("access_token"),
          },
        })
        .then((response) => {
          this.tags = response.data.data;
        })
        .catch(function (error) {
          console.log("error", error);
        });
    },
    onSubmit(e) {
        e.preventDefault();

        let formData = new FormData();
        formData.append("name", this.form.name);
        formData.append("slug", this.form.slug);
        formData.append("image", this.form.image);
        formData.append("icon", this.form.icon);
        formData.append("body", this.form.body);
        formData.append("online", this.form.online);
        formData.append("template", this.form.template);
        formData.append("quote", this.form.quote);
        formData.append("video", this.form.video);
        formData.append("tags", this.form.tags);
        formData.append("categories", this.form.categories);
        formData.append("metas", this.form.metaTags);
        formData.append("metas", this.form.metaDescription);

        axios
        .post("/api/admin/posts/add", formData, {
        headers: {
            Authorization: localStorage.getItem("access_token"),
        },
        })
        .then((res) => {
        this.$router.push({ name: "adminPosts" });

        this.form = {
            name: "",
            slug: "",
            image: "",
            icon: "",
            body: "",
            online: "",
            template: "",
            quote: "",
            video: "",
            tags: [],
            categories: [],
            metaTags: [],
            metaDescription: "",
        };

        const noti = this.$vs.notification({
            position: "top-right",
            color: "success",
            icon: "<i class='fas fa-check'></i>",
            title: "Done!",
            text: res.data.message,
        });
        })
        .catch((error) => {
            var errors = error.response.data;
            let errorsHtml = "<ol>";
            $.each(errors.errors, function (k, v) {
                errorsHtml += "<li>" + v + "</li>";
            });
            errorsHtml += "</ol>";
            const noti = this.$vs.notification({
                position: "top-right",
                color: "danger",
                icon: "<i class='fas fa-bug'></i>",
                title: "Oops!",
                text: errorsHtml,
            });
        });
    },
}

Any idea?

score 1 · Accepted Answer · answered Dec 25 '20 at 07:29

In the Vuesax 4 <vs-select> docs, there is no <form> tag and perhaps you shouldn't have one either. (In a SPA, you don't typically submit the form using the browser's built in form handling anyway, and you are not using it like that either, nor the ref or the model.)

If you still want to continue using the <form> tag, you can use the @submit.prevent modifier:

<form
    class="mt-2"
    ref="form"
    :model="form"
    enctype="multipart/form-data"
    @submit.prevent
>

Vuejs select option submits the form

Code

1 Answers1