기본값을 방지한 다음 VueJ를 사용하여 기본값을 제출하는 방법s

기본값을 방지한 다음 VueJ를 사용하여 기본값을 제출하는 방법s

나는 VueJS를 이용하여 양식을 제출하고 있으며 최종 제출에 대한 두 가지 조치를 차례로 제출해야 한다.

둘 중 하나는 하나만 달릴 때 작동한다.

내가 하려는 것은, 소방서에 가입하고, 기다렸다가, 정상적으로 동일한 이메일/비밀번호로 양식을 제출하고, 그 사용자에게 다른 로그인 시스템을 등록하는 것이다.

구분 기호가 변경되었으니, 저것 좀 봐.

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>

그럼 둘 중 어느 한쪽에서 함께 작용하지만 함께 작용하지 않는 J.

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();
  }
}
});

제출 핸들러 한 명에게 전화한 다음 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
    }
  }
}

참조URL: https://stackoverflow.com/questions/58583633/how-to-prevent-default-then-submit-default-with-vuejs