Vue+element使用@keyup.enter不起作用

今天在写登录功能的时候,在用Vue的@key.enter的时候由于使用elementUI组件,@keyup.enter不起作用,经排查,发现需要这样@keyup.enter.native=“login”
代码

<el-form ref="loginForm" :model="loginForm" :rules="myRules"  @keyup.enter.native="login">
              <el-form-item prop="account">
                <el-input v-model="loginForm.account" type="text" placeholder="请输入用户名">
                  <template slot="prepend">用户名</template>
                </el-input>
              </el-form-item>
              <el-form-item prop="pwd">
                <el-input v-model="loginForm.pwd" type="password" placeholder="请输入登录密码">
                  <template slot="prepend">登录密码</template>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="login"  >登录</el-button>
              </el-form-item>
 </el-form>

使用情景
实现点击enter键的时候能够提交表单
在这里插入图片描述
1、当用@keyup.enter敲击enter回车之后直接提交表单, 如果加了element组件就要用

@keyup.enter.native , 但是当你只有一个输入框的时候 from元素上要加上。

2、当然也可以在input上加监听

<input v-on:keyup.13="login">
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值