elementui的el-input按回车键后执行方法

elementui的el-input按回车键后执行方法

当el-input标签放入el-form标签中时:
1.只有一个el-input标签
2.只有一个el-input标签和一个el-button标签

以上两种情况会触发form表单默认提交刷新事件

解决方法:

在el-form中增加 @submit.native.prevent

若想增加回车后触发事件:
el-input增加 @keyup.enter.native

<el-form :model="findPwdForm" ref="PwdForm"  @submit.native.prevent>
          <el-form-item
            prop="userName"
            label="用户名"
            :rules="[{required: true, message: '请输入用户名', trigger: 'blur'}]"
          >
            <el-input
              type="text"
              v-model="findPwdForm.userName"
              placeholder="请输入用户名"
              @keyup.enter.native="onNext"
            >el-input>
          el-form-item>
          <el-form-item>
            <el-button @click="onCancel()">取消el-button>
            <el-button type="primary" @click="onNext">确定el-button>
          el-form-item>
 el-form>

你可能感兴趣的:(vue,前端笔记)