Javascript 提交后重新加载NuxtJS | Axios注册表页

应该如何工作？ 当用户提交表单时，应显示通知并通知用户通过电子邮件激活帐户

问题 当用户提交表单并立即刷新页面时，通知不会出现

相同的代码，但在Login.vue中使用nuxt auth可以正常工作，并且不会发生刷新

代码

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

---

Login.vue中的相同函数工作正常，因为

evt.preventDefault（）

。您应该将事件作为参数传递到register函数中，并对其调用

preventDefault（）

方法以防止表单的默认行为（在提交时刷新页面）：

---

非常感谢你的回答。我必须承认我可能是瞎子，我没有注意到。但是现在当你按下按钮时，什么也没有发生，只有加载条显示为Nevermind。。。这是我的服务器问题。谢谢你的回复/不要担心有时会发生这种情况。很高兴听到这有帮助。

// 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) {}
   }
 },

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) {
        }
    }
},