美文网首页
elementUI: el-input 回车提交,阻止默认事件

elementUI: el-input 回车提交,阻止默认事件

作者: McDu | 来源:发表于2019-09-30 09:57 被阅读0次

将 el-input 放入 el-form 中之后,el-input 回车会导致页面刷新. 解决办法
el-form 添加 @submit.native.prevent 阻止提交事件。
el-input 添加 @keyup.enter.native 事件回车提交。

<template>
    <div>
        <el-form :model="form" @submit.native.prevent>
            <el-input type="text" v-model="form.query" @keyup.enter.native="handleQuery" />
            <el-button type="primary" @click="handleQuery">提交</el-button>
        </el-form>
    </div>
</template>
<script>
export default {
    data() {
        return {
            form: {
                query: ''
            }
        };
    },
    methods: {
        handleQuery() {
            // axios ... and so on.
        }
    }
};
</script>

相关文章

网友评论

      本文标题:elementUI: el-input 回车提交,阻止默认事件

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