Nuxt JS | Axe ios Регистрация перезагрузить страницу формы после отправки - PullRequest
Новая
       58

Nuxt JS | Axe ios Регистрация перезагрузить страницу формы после отправки

0 голосов
/ 06 февраля 2020

Как должно работать? Когда пользователь отправляет форму, должно появиться уведомление и уведомление пользователя для активации учетной записи по электронной почте.

Проблема Уведомление не появляется, потому что когда пользователь отправляет форму на страницу, немедленно обновляет sh страницу.

Тот же код, но с аутентификацией nuxt в логине. vue работает нормально, а refre sh не происходит

код 

// Register.vue template


<form action @submit="register">
              <label for="login">Nazwa Użytkownika:</label>
              <input type="text" id="login" v-model="nickname" required />
              <label for="password">Hasło:</label>
              <input type="password" id="password" v-model="password" required />
              <label for="email">Email:</label>
              <input type="email" id="email" v-model="email" required />
              <div class="docs-box">
                <label for="docs" class="toggleButton">
                  <span>Zgadzam się z regulaminem</span>
                </label>
                <input type="checkbox" id="docs" required />
              </div>
              <div class="action-button register">
                <button type="submit" class="blue small">Utwórz Konto</button>
                <span>
                  lub jeśli masz konto,
                  <nuxt-link to="/login">
                    <span class="bold">zaloguj się</span>
                  </nuxt-link>
                </span>
              </div>
            </form>

// Register.vue script


methods: {
   async register() {
     try {
       this.invalidSign = false;
       await this.$axios
         .$post("register", {
           withCredentials: true,
           headers: {
             Accept: "application/json",
             "Content-Type": "x-www-form-urlencoded"
           },
           nick: this.nickname,
           pass: this.password,
           email: this.email
         })
         .then(res => {
           if (res.status == 0) {
             this.invalidSign = "error";
           } else if (
             this.nickname == "" ||
             this.password == "" ||
             this.email == "" ||
             checkbox.checked === false
           ) {
             this.invalidSign = "error";
           } else {
             this.invalidSign = "success";
           }
         });
     } catch (e) {
     }
   }
 },

// Login.vue template


<form action @submit="login">
             <label for="login">Nazwa Użytkownika:</label>
             <input
               required
               type="text"
               id="login"
               v-model="nickname"
               :class="{
           'error-input': invalidSign == 'error',
           'success-input': invalidSign == 'success'
         }"
               @click="invalidSign = false"
             />
             <label for="password">Hasło:</label>
             <input
               required
               type="password"
               id="password"
               v-model="password"
               :class="{
           'error-input': invalidSign == 'error',
           'success-input': invalidSign == 'success'
         }"
               @click="invalidSign = false"
             />
             <span class="error-text" v-if="invalidSign == 'error'">Błędny login lub hasło</span>

             <div class="action-button">
               <button type="submit" class="blue small">Zaloguj</button>
               <span>
                 Jeśli zapomniałeś hasła,
                 <nuxt-link to="/remember">
                   <span class="bold">przypomnij</span>
                 </nuxt-link>
               </span>
             </div>
           </form>

// Logiv.vue script


methods: {
   async login(evt) {
     const loginButton = document.getElementById("loginButton");
     evt.preventDefault();
     try {
       await this.$auth.loginWith("local", {
         data: {
           nick: this.nickname,
           pass: this.password
         }
       });
       if (status == 0) {
         this.invalidSign = "error";
       } else {
         this.invalidSign = "success";
       }
     } catch (e) {}
   }
 },

1 Ответ

0 голосов
/ 06 февраля 2020

Та же функция в логине. vue отлично работает из-за evt.preventDefault(). Вы должны передать событие в своей функции регистра в качестве параметра и вызвать для него метод preventDefault(), чтобы предотвратить поведение формы по умолчанию (которое обновляет страницу при отправке): 

methods: {
    async register(evt) {
        evt.preventDefault();
        try {
        this.invalidSign = false;
        await this.$axios
            .$post("register", {
            withCredentials: true,
            headers: {
                Accept: "application/json",
                "Content-Type": "x-www-form-urlencoded"
            },
            nick: this.nickname,
            pass: this.password,
            email: this.email
            })
            .then(res => {
            if (res.status == 0) {
                this.invalidSign = "error";
            } else if (
                this.nickname == "" ||
                this.password == "" ||
                this.email == "" ||
                checkbox.checked === false
            ) {
                this.invalidSign = "error";
            } else {
                this.invalidSign = "success";
            }
            });
        } catch (e) {
        }
    }
},
...