Vue中console.log重复触发两次的问题求助

你的问题出在表单和提交按钮同时绑定了触发getLogin的事件：

• form标签上用了@submit.prevent="getLogin"，点击type为submit的按钮时，会触发form的submit事件
• 同时按钮自身又绑定了v-on:click="getLogin"，点击按钮时直接触发click事件

这两个事件会先后执行，导致getLogin被调用两次，console.log自然输出两次。

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

方法1：移除按钮的click绑定（推荐） #

因为type="submit"的按钮点击后默认会触发form的submit事件，不需要额外绑定click，保留form的submit绑定即可：

<template>
  <div>
    <form @submit.prevent="getLogin" id="form">
      <div class="mb-4">
        <input
          name="text"
          type="text"
          placeholder="1547089"
          v-model="loginForm.text"
          id="order-id"
          required
          minlength="5"
        />
      </div>
      <div>
        <input
          name="password"
          type="password"
          placeholder="****"
          v-model="loginForm.password"
          required
          minlength="4"
          maxlength="4"
        />
      </div>
      <div id="div-submit">
        <button
          type="submit"
          v-bind:disabled="loginForm.password.length < 4"
          id="submit"
        >
          提交
        </button>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm:{
        text: '',
        password: ''
      }
    }
  },
  methods: {
    getLogin(){
      console.log("Posielam do konzole", this.loginForm)
    }
  }
}
</script>

方法2：移除form的submit绑定 #

如果想通过按钮的click触发逻辑，把form上的@submit.prevent="getLogin"去掉即可：

<template>
  <div>
    <form id="form">
      <!-- 其余表单内容不变 -->
      <div id="div-submit">
        <button
          type="button" <!-- 建议把type改成button，避免默认submit行为干扰 -->
          v-on:click="getLogin"
          v-bind:disabled="loginForm.password.length < 4"
          id="submit"
        >
          提交
        </button>
      </div>
    </form>
  </div>
</template>

内容的提问来源于stack exchange，提问作者Roman Šnìrer