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

2019-09-30  本文已影响0人  McDu

将 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>
上一篇下一篇

猜你喜欢

热点阅读