页面自动刷新和注册逻辑问题

来源:4-5 单页面应用Demo2(2)

绝尘kinoko

2019-05-30 15:43

rt,代码如下:

<template>
  <div>
    <form v-if="!isReg">
      <label for="name1">User Name: </label>
      <input type="text" id="name1" v-model="name"><br>
      <label for="pwd1">Password: </label>
      <input type="password" id="pwd1" v-model="pwd"><br>
      <button @click="login()">Login</button>
      <button @click="reg()">register</button>
    </form>
    <form v-else>
      <label for="name2">User Name: </label>
      <input type="text" id="name2" v-model="name"><br>
      <label for="pwd2">Password: </label>
      <input type="password" id="pwd2" v-model="pwd"><br>
      <label for="pwda">Password Again: </label>
      <input type="password" id="pwda" v-model="pwda"><br>
      <button @click="confirm()">confirm register</button>
      <button @click="cancel()">cancel register</button>
    </form>
  </div>
</template>
login() {
  this.$router.push('home')
},
reg() {
  this.isReg = true
},
cancel() {
  this.isReg = false
},
confirm() {
  if(this.pwd === this.pwda && this.name !== '' && this.pwd !== '') {
    localStorage.setItem('name',this.name)
    localStorage.setItem('pwd',this.pwd)
    this.name = ''
    this.pwd = ''
    this.isReg = false
  } else {
    alert("两次输入不一致")
  }
}

没有报错,问题在于点击任意按钮时页面都会自动刷新,这就导致点击注册时,注册表单一闪而过刷新回登录,此时url为localhost:8080/?,我重启服务、浏览器都没有用。

还有最后这个confirm函数,空信息注册会弹窗,但是localstorage也会存数据,相当于两个分支都走了一遍,有点不可思议,是我判断的条件有问题吗?

有点懵,还请赐教。

写回答 关注

2回答

  • Brian
    2019-05-30 23:11:14
    已采纳

    试试,button 加一个type="button"

    绝尘kino...

    谢谢老师,问题已解决,button默认type是submit,所以会刷新。

    2019-06-01 09:53:55

    共 1 条回复 >

  • 庄里的老大爷
    2019-10-24 14:29:45

    完美解决??

3小时速成 Vue2.x 核心技术

带你快速学习最流行的前端框架vue2.x的核心技术

82565 学习 · 499 问题

查看课程

相似问题