美文网首页
vue、vue-router中的form自动提交

vue、vue-router中的form自动提交

作者: 放风筝的小小马 | 来源:发表于2018-02-06 14:24 被阅读1123次

    情况一:点击button时,触发默认行为

     <form>
              <div class="form-group row my-3">
                <label for="username" class="col-3 col-form-label">用户名</label>
                <div class="col-9">
                  <input type="text" id="username" class="form-control" :disabled="logging"
                         placeholder="请输入用户名或手机号码" v-model="bossUsername">
                </div>
              </div>
              <div class="form-group row my-3">
                <label for="password" class="col-3 col-form-label">密码</label>
                <div class="col-9">
                  <input type="password" id="password" class="form-control" :disabled="logging"
                         placeholder="请输入密码" v-model="bossPassword">
                </div>
              </div>
              <div class="row my-3">
                <div class="col-6 text-left">
                  <a href="#">免费注册</a>
                </div>
                <div class="col-6 text-right">
                  <a href="#">忘记密码</a>
                </div>
              </div>
              <button type="submit" class="btn btn-primary btn-block btn-login" :disabled="logging"
                      @click.stop="submitLogin">{{logging?'正在登录...':'登录'}}</button>
            </form>
    

    在使用了vue、vue-router的项目中,上面的一个登录表单,当点击登录的时候,会触发表单的默认提交行为,因此必须在button的click中添加阻止默认行为:@click.stop.prevent="submitLogin"

    情况二:在input输入框中输入enter键时,触发默认行为

    <input type='number' class="form-control input-mobile" placeholder="请输入手机号码" :disabled="step!=='init'"
                       v-model="memberMobile" @keydown.enter="searchMember">
    

    在输入框中输入ener键时会触发form表单的默认行为,修改为:
    @keydown.enter.stop.prevent="searchMember"

    **注意:如果修改为:@keyup.enter.stop.prevent="searchMember,同样会触发默认行为,即使添加了stop.prevent

    相关文章

      网友评论

          本文标题:vue、vue-router中的form自动提交

          本文链接:https://www.haomeiwen.com/subject/bysgzxtx.html