美文网首页
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