解决 Inertia.js 与 Vue 3 应用中表单重复提交问题

解决方案一：利用 Inertia useForm 的 processing 状态

Inertia.js 的 useForm 辅助函数提供了一个非常实用的 processing 属性，用于指示当前表单是否正在发送请求。我们可以利用这个属性来防止在请求处理期间重复提交。

立即学习“前端免费学习笔记（深入）”；

核心思路： 在 submit 方法的开头检查 this.form.processing。如果为 true，则说明请求正在进行中，直接返回，不执行后续的提交逻辑。

import { defineComponent } from "vue";
import AppLayout from "@/Layouts/AppLayout.vue";
import { useForm } from "@inertiajs/inertia-vue3"; // 引入 useForm

export default defineComponent({
  // ... 其他配置 ...
  setup() {
    const form = useForm({
      title: null,
      content: null,
      image: null,
      region: null,
    });
    return { form };
  },
  methods: {
    submit() {
      // 检查表单是否正在处理中，如果是，则阻止重复提交
      if (this.form.processing) {
        return false;
      }

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

      this.form.post(route("store"), {
        preserveScroll: true, // 提交后保持滚动位置
        onSuccess: () => {
          // 请求成功后重置表单，以便下一次提交
          this.form.reset();
          // 可以添加成功提示或其他逻辑
          console.log("表单提交成功！");
        },
        onError: (errors) => {
          // 处理错误，例如显示验证错误信息
          console.error("表单提交失败：", errors);
        },
        onFinish: () => {
          // 请求完成（无论成功或失败）后执行的逻辑
          console.log("表单请求完成。");
        }
      });
    },
    // ... 其他方法 ...
  },
  // ... 其他生命周期钩子 ...
});

onSuccess 回调与 form.reset()： 在 form.post 方法中，onSuccess 回调会在请求成功并页面更新后执行。在此回调中调用 this.form.reset() 是一个良好的实践，它会将表单的所有字段重置为初始值，为下一次提交做好准备。

解决方案二：正确的表单事件处理与阻止默认行为

将提交逻辑绑定到

修改 Vue 模板：

关键改动：

PHP经典实例(第二版)

PHP经典实例（第2版）能够为您节省宝贵的Web开发时间。有了这些针对真实问题的解决方案放在手边，大多数编程难题都会迎刃而解。《PHP经典实例(第2版)》将PHP的特性与经典实例丛书的独特形式组合到一起，足以帮您成功地构建跨浏览器的Web应用程序。在这个修订版中，您可以更加方便地找到各种编程问题的解决方案，《PHP经典实例(第2版)》中内容涵盖了：表单处理；Session管理；数据库交互；使用We

下载

• 修改为
。
• 提交按钮 store post! 的 type 从 button 修改为 submit，这样它就能触发表单的 submit 事件。
• 提交按钮添加 :disabled="form.processing" 属性，在表单提交期间禁用按钮，提供视觉反馈并防止用户重复点击。
• input type="hidden" name="region" v-bind="form.region" 修正为 v-model="form.region" 以确保数据双向绑定正确。