Vue.js双提交按钮问题：点击「了解风险」按钮无法创建账号并跳转

问题描述 #

开发了一个用户信息填写程序，页面包含「提交」和「了解风险」两个按钮。「提交」按钮功能正常，但点击「了解风险」按钮时，无法实现创建用户账号并跳转到指定页面的需求，即使给按钮添加了和提交按钮相同的类也无效。

现有代码 #

HTML部分

<form
          @submit.prevent="member_whitelist_signup"
          class="login100-form validate-form"
        >
  <div
              class="wrap-login100-form-btn"
              style="z-index: 0"
              
            >

              <div class="login100-form-bgbtn"></div>
              <button class="login100-form-btn">Submit</button>
            </div>
          </div>
          

          <CongratsModel v-show="showModal" @close-modal="showModal = false" />
          <div class="container-login100-form-btn m-t-10 m-b-10">
            <p
              
              class="know_your_risk_label text-secondary"
            >
              <button class="login100-form-btn know-risk-text">Know your risk</button>
            </p>
          </div>

JavaScript部分

self.$http
        .post(self.$member_whitelist_signup, form_data)
        .then(function (response) {
          if (response.data.success == true) {
            if (self.know_your_risk_value == 0) {
              self.user_msg = "Member details updated successfully.";
              localStorage.setItem("new_user", "true");
              self.login_user();
              // self.$router.push({ path: '/member/member-questionnaire' });

            } else {
              // self.showModal=true
              window.location.href = window.location.origin + "/questionnaire";

            }
          } else {
            if (response.data.data == null) {
              self.error_msg = response.data.message;
            } else {
              let first_error_key = Object.keys(response.data.data)[0];
              self.error_msg = response.data.data[first_error_key][0];
            }
          }

          self.devloader = false;
        })
        .catch(function (error) {
          console.warn(error);
        });

解决方案 #

步骤1：给「了解风险」按钮绑定点击事件并指定类型 #

修改HTML中「了解风险」按钮的代码，添加点击事件绑定，同时设置type="button"避免默认表单提交行为：

<button type="button" class="login100-form-btn know-risk-text" @click="handleKnowRisk">Know your risk</button>

步骤2：实现点击事件方法 #

在Vue的methods中新增handleKnowRisk方法，标记当前操作类型后复用现有提交逻辑：

methods: {
  // 保留原有的member_whitelist_signup方法
  member_whitelist_signup() {
    // 你的原有提交逻辑代码...
  },
  handleKnowRisk() {
    // 设置标记，让提交逻辑走跳转问卷的分支
    this.know_your_risk_value = 1;
    // 调用提交方法，复用创建账号的逻辑
    this.member_whitelist_signup();
  }
}

步骤3：补充表单验证（如果有） #

如果页面存在表单验证逻辑，需要在handleKnowRisk中先执行验证，通过后再调用提交方法：

handleKnowRisk() {
  // 假设你有表单验证方法validateForm
  if (this.validateForm()) {
    this.know_your_risk_value = 1;
    this.member_whitelist_signup();
  }
}

原理说明 #

• 「提交」按钮通过表单@submit.prevent触发提交逻辑，而「了解风险」按钮不在表单提交流程内，需单独绑定点击事件。
• 通过设置know_your_risk_value为1，触发现有提交逻辑中的跳转分支。
• 添加type="button"是为了防止按钮默认作为submit按钮触发表单提交，避免逻辑冲突。

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