Как предотвратить дефолт, а затем отправить по умолчанию с VueJS

Question

Я отправляю форму, используя VueJS, и мне нужно отправить два действия для окончательной отправки, одно за другим.

Любой из них работает при запуске только одного.

То, что я пытаюсь сделать, - это зарегистрировать пользователя для firebase, подождать, затем отправить форму с тем же адресом электронной почты / паролем, как обычно, и зарегистрировать этого пользователя с другим входом в систему.

Разделители были изменены, поэтому просто посмотрите на это.

Как это сделать с помощью Jquery

   <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 .

Например

<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
    }
  }
}