Vue.js 2表单提交数据重复保存问题求助

问题根源 #

你遇到的重复保存问题，核心原因是表单的@submit.prevent和按钮的@click同时绑定了同一个提交方法PostDominio。由于form内的button默认类型为submit，点击按钮时会同时触发两个事件：按钮的click事件，以及表单的submit事件。哪怕你给submit加了.prevent阻止默认跳转，两个绑定的方法调用仍会执行，最终发起两次POST请求导致数据重复保存。

解决方案（二选一即可） #

方案1：移除按钮的@click绑定，仅保留表单的提交事件 #

只通过表单的submit事件触发提交逻辑，按钮作为默认的submit按钮无需额外绑定click事件：

<template>
  <div class="row">
    <form @submit.prevent="PostDominio">
      <hr />
      <label id="lbldom">Dominio </label>
      <input v-model="form.Titulo" type="text" />
      <button
        id="sendom"
        class="btn btn-outline-primary btn-sm shadow-sm p-1 mb-1"
      >
        Gravar
      </button>
      <hr />
    </form>
  </div>
</template>

方案2：给按钮设置type="button"，避免触发表单submit事件 #

明确将按钮标记为普通按钮，阻止其默认触发表单提交的行为，仅通过click事件调用提交方法：

<template>
  <div class="row">
    <form @submit.prevent="PostDominio">
      <hr />
      <label id="lbldom">Dominio </label>
      <input v-model="form.Titulo" type="text" />
      <button
        id="sendom"
        class="btn btn-outline-primary btn-sm shadow-sm p-1 mb-1"
        type="button"
        @click="PostDominio"
      >
        Gravar
      </button>
      <hr />
    </form>
  </div>
</template>

额外优化点 #

你的PostDominio方法中，.bind(this)是多余的——箭头函数catch((error) => {})已经自动绑定了组件实例的this，且axios返回的Promise调用bind无实际作用，可以移除：

PostDominio() {
  axios
    .post('http://localhost:3000/dominios', this.form)
    .catch((error) => {
      console.log(error)
    })
}

内容的提问来源于stack exchange，提问作者David Borges