3

<template>

<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px"
         class="demo-ruleForm login-container" >
    <h3 class="title">系统登录</h3>
    <el-form-item prop="account">
        <el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="账号"></el-input>
    </el-form-item>
    <el-form-item prop="password">
        <el-input type="password" v-model="ruleForm2.password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleSubmit2"></el-input>
    </el-form-item>

    <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;"  @click.native.prevent="handleSubmit2" :loading="logining" >登录
        </el-button>
    </el-form-item>
</el-form>

</template>

@keyup.enter这里必须加上 .native 才能生效.

sewth 338
2017-05-19 提问

查看全部 5 个回答

7

https://cn.vuejs.org/v2/guide...

clipboard.png

可以理解为:
组件得加上 .native 才能监听原生事件


另: 刚好看到一篇博文(与题目未必相关), 记录下(嘿嘿嘿):
W3C 标准中有如下规定:

When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.

即:当一个 form 元素中只有一个输入框时,在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为,可以在 <el-form> 标签上添加 @submit.native.prevent ;

@submit.native.prevent是用来阻止默认行为的 ;

推荐答案

3

已采纳

因为你@keyup.enter是写在一个封装好的组件上
如果你写在一个input上就不需要.native
至于为什么,请参考vue文档

推广链接