Question

我正在使用VueJS提交表单，我需要在最终提交时提交两个动作，一个接一个。

仅运行一项，任何一项都能工作。

我要做的是注册一个用户使用firebase，然后等待，然后使用与普通电子邮件相同的电子邮件/密码提交表单，并使用另一个登录系统注册该用户。

定界符已更改，因此只看一下。

   <form @submit="checkForm" @submit.prevent="register" action="#" method="post" novalidate="true" ref="form">
                <h1 class="text-center">{{ 'customer.register.title' | t }}</h1>
                  <h1 v-if="authUser">
                  Is authed in
                  </h1>
                  <h1 v-else>
                  Not auth
                  </h1>
                <div class="form-group">
                    <ul>
                        <li v-for="error in errors">
                            ${ error }
                        </li>
                    </ul>
                </div>
                <p>
                    <label for="CustomerFirstName">${ firstName }</label>
                    <input id="name" v-model="name" type="name" name="customer[first_name]" autocomplete="name"
                        autocorrect="off" autocapitalize="off">
                </p>
                <p>
                    <label for="CustomerEmail">${ loginEmailName }</label>
                    <input id="email" v-model="email" type="email" name="customer[email]" autocomplete="email"
                        autocorrect="off" autocapitalize="off">
                </p>

                <p>
                    <label for="CustomerPassword">${ loginPasswordName }</label>
                    <input id="password" v-model="password" type="password" name="customer[password]">
                </p>

                <p>
                  <button type="submit" value="Create" class="btn btn-primary">Submit</button>
                </p>
            </form>

然后使用可在其中一个但不能同时使用的JS。

const appTwo = new Vue({
delimiters: ["${", "}"],
el: "#create_customer_vue",
data: {
  errors: ["1", "2", "3"],
  email: '',
  password: '',
  name: null,
  firstName: "First name",
  loginEmailName: emailTitle,
  loginPasswordName: passwordTitle,
  title: registerTitle,
  authUser: null
},
methods: {
  register: function() {
   firebase.auth().createUserWithEmailAndPassword(this.email, this.password)
},
submitForm: function(){
  this.$refs.form.submit()
},
 created() {
   firebase.auth().onAuthStateChanged(user => { this.authUser = user })
},
  checkForm: function(e) {
    if (this.email && this.password) {
      return true;
    }

    this.errors = [];

    if (!this.email) {
      this.errors.push("Valid email required");
    }
    if (!this.password) {
      this.errors.push("Valid password required");
    }
    e.preventDefault();
  }
}
});

Answer 1

只需调用一个提交处理程序，然后在Firebase operation完成后正常提交表单即可。

例如

<form @submit.prevent="register" ... >

methods: {
  checkForm () {
    if (this.email && this.password) {
      return true;
    }

    this.errors = [];

    if (!this.email) {
      this.errors.push("Valid email required");
    }
    if (!this.password) {
      this.errors.push("Valid password required");
    }
    return false
  },
  async register ($event) {
    if (this.checkForm()) {
      await firebase.auth().createUserWithEmailAndPassword(this.email, this.password)
      $event.target.submit() // or use this.$refs.form.submit() if you prefer
    }
  }
}

如何防止默认，然后使用VueJS提交默认

1 个答案: