VUE 防止enter回車刷新頁面

1. 概述

1.1 說明

　　在表單中，在input輸入框中輸入內容后進行回車操作，會直接整個頁面進行刷新；此問題因為是input回車操作時直接進行了表單提交操作(回車導致form表單提交)，若想不進行頁面刷新，則需組織表單提交操作。

 2. 代碼

2.1 表單代碼

<template>

    <Form ref="form" :model="data" :rules="rules" :label-width="labelWidth" @submit.native.prevent>

        <Row :gutter="24" type="flex" justify="end">

            <Col span="12">

                <FormItem label="查詢內容：" prop="content" label-for="content">

                    <Input v-model="data.content" @keyup.enter.native="handleSubmit" placeholder="請輸入查詢內容" element-id="content" />

                </FormItem>

            </Col>

            <Col span="12" class="ivu-text-right">

                <FormItem>

                    <Button type="primary" @click="handleSubmit">查詢</Button>

                    <Button class="ivu-ml-8" @click="handleReset">重置</Button>

                </FormItem>

            </Col>

        </Row>

    </Form>

</template>

2.2 代碼功能

表單阻止提交操作：@submit.native.prevent
輸入框中enter回車操作：@keyup.enter.native="handleSubmit"