前后端分离vue的触发事件 @keyup.enter不生效但是刷新

最新推荐文章于 2024-06-22 15:54:23 发布

蝶梦谷

最新推荐文章于 2024-06-22 15:54:23 发布

阅读量678

点赞数

文章标签： vue java

本文链接：https://blog.csdn.net/qq_42770022/article/details/107013652

版权

在有form表单的情况下，回车触发的提交事件，将<form></form>去掉就好

原来（刷新页面但是得不到想要的结果）：

      <form>
        <div class="info_title">条件查询</div>
        <div class="info-box-content" id="select">
          <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-4 col-xs-6 m-b-sm">
              <div class="form-group">
                <label class="col-sm-4 control-label">用户id：</label>
                <div class="col-sm-8">
                  <input type="text" class="form-control" v-model="parkUserId" @keyup.enter="query" placeholder="用户id">
                </div>
              </div>
            </div>
          </div>

          <div class="text-center">
            <a class="btn btn-primary" @click="query"><i class="fa fa-search"></i> 查询</a>
            <a class="btn btn-default" @click="reset"><i class="fa fa-remove"></i> 重置</a>
          </div>
        </div>
      </form>

修改后（不刷新可以进行查询）：

 <div class="info_title">条件查询</div>
        <div class="info-box-content" id="select">
          <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-4 col-xs-6 m-b-sm">
              <div class="form-group">
                <label class="col-sm-4 control-label">用户id：</label>
                <div class="col-sm-8">
                  <input type="text" class="form-control" v-model="parkUserId" @keyup.enter="query" placeholder="用户id">
                </div>
              </div>
            </div>
          </div>

          <div class="text-center">
            <a class="btn btn-primary" @click="query"><i class="fa fa-search"></i> 查询</a>
            <a class="btn btn-default" @click="reset"><i class="fa fa-remove"></i> 重置</a>
          </div>
        </div>