Question

我正在使用 vuesax 4 并且我的表单中有一些选项，但是每次我选择一个选项时它都会提交我的表单！ 如何防止这种情况发生？

代码

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

有什么想法吗？

Answer 1

在 Vuesax 4 <vs-select> docs 中，没有 <form> 标签，也许您也不应该有。（在 SPA 中，您通常不会使用浏览器的内置表单处理来提交表单，并且您也不会像那样使用它，也不会使用 ref 或模型。）

如果您仍想继续使用 <form> 标记，可以使用 @submit.prevent 修饰符：

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

Vuejs选择选项提交表单

代码

1 个答案: