解决Inertia.js中Vue 3表单重复提交与意外请求问题

<form @click="submit" enctype="multipart/form-data">
  <!-- ... form fields ... -->
  <button type="button" style="color: lavender" class="btn btn-secondary">
    store post!
  </button>
</form>

<template>
  <app-layout title="Dashboard">
    <template #header>
      <h2 class="h4 font-weight-bold">Create</h2>
    </template>

    <div class="container mt-5 text-gray-300">
      <!-- 1. 将 @click="submit" 改为 @submit.prevent="submit" -->
      <form @submit.prevent="submit" enctype="multipart/form-data">
        <input type="hidden" name="region" v-model="form.region">
        <div class="form-group">
          <label for="title">title</label>
          <input
            type="text"
            name="title"
            class="form-control"
            v-model="form.title"
          />
        </div>
        <div class="form-group text-gray-300">
          <label for="content">content</label>
          <div>
            <textarea
              type="text"
              name="content"
              class="form-control"
              v-model="form.content"
            >
            </textarea>
          </div>
        </div>

        <br />
        <br />
        <div class="form-group">
          <label for="file">file</label>
          <input type="file" name="image" @change="previewImage" ref="photo" />
          @@##@@
        </div>

        <br />
        <br />
        <br />
        <br />
        <br />
        <div>
          <!-- 2. 将 type="button" 改为 type="submit"，并添加 :disabled="form.processing" -->
          <button
            type="submit"
            style="color: lavender"
            class="btn btn-secondary"
            :disabled="form.processing"
          >
            store post!
          </button>
             

          <button
            type="button"
            onclick="location.href='index'"
            style="color: lavender"
            class="btn btn-dark"
          >
            cancel and go back
          </button>
        </div>
      </form>
    </div>
  </app-layout>
</template>

<script>
import { defineComponent } from "vue";
import AppLayout from "@/Layouts/AppLayout.vue";
import { InertiaLink, useForm } from "@inertiajs/inertia-vue3";

export default defineComponent({
  props: ['region1'],
  components: {
    AppLayout,
    InertiaLink,
  },

  data() {
    return {
      regionN: "zz",
      url: null, // 初始化url，用于图片预览
    };
  },

  setup() {
    const form = useForm({
      title: null,
      content: null,
      image: null,
      region: null
    });

    return { form };
  },
  methods: {
    submit() {
      // 3. 在方法开始处检查 form.processing 状态
      if (this.form.processing) {
        console.log("Form is already processing, preventing duplicate submission.");
        return;
      }

      this.form.image = this.$refs.photo.files[0];
      this.form.region = this.regionN;

      // Inertia.js的post方法本身会处理加载状态
      this.form.post(route("store"), {
        // 可选：提交成功后重置表单
        onSuccess: () => this.form.reset(),
        // 可选：处理错误
        onError: (errors) => console.error("Submission errors:", errors),
      });
    },
    previewImage(e) {
      const file = e.target.files[0];
      if (file) {
        this.url = URL.createObjectURL(file);
      } else {
        this.url = null;
      }
    },
  },

  mounted() {
    this.regionN = this.region1;
    console.log("Region from props:", this.regionN);
    // 确保form.region在mounted时被设置
    this.form.region = this.regionN;
  }
});
</script>

<InertiaLink
  :href="route('delete', { id: posts.id })"
  class="btn btn-warning"
  method="delete"
>
  delete btn
</InertiaLink>