vue + element ui 阻止表單輸入框回車刷新頁面

本文轉載自查看原文 2018-07-18 21:39 6965 Vue + Element ui

問題

　　在 vue+element ui 中只有一個輸入框（el-input）的情況下，回車會提交表單。

解決方案

　　在 el-form 上加上 @submit.native.prevent 這個則會阻止表單回車提交。

測試

下面的代碼出現表單回車提交

<body>
<div id="app">
    <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="活動名稱">
            <el-input v-model="form.name"></el-input>
        </el-form-item>
    </el-form>
</div>
<!-- 引入組件庫 -->
<script type="text/javascript" src="${ctx}/static/common/js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script type="text/javascript">

    new Vue({
        el: "#app",
        data: {
            form : {
            }
        }
    });
</script>

</body>

下面的代碼不會出現回車表單提交：el-form 中加上@submit.native.prevent

<body>
<div id="app">
    <el-form ref="form" :model="form" label-width="80px" @submit.native.prevent >
        <el-form-item label="活動名稱">
            <el-input v-model="form.name"></el-input>
        </el-form-item>
    </el-form>
</div>
<!-- 引入組件庫 -->
<script type="text/javascript" src="${ctx}/static/common/js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script type="text/javascript">

    new Vue({
        el: "#app",
        data: {
            form : {
            }
        }
    });
</script>

</body>

下面的代碼也不會出現回車表單提交：使用兩個 el-input

<body>
<div id="app">
    <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="活動名稱">
            <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="即時配送">
            <el-input v-model="form.delivery"></el-input>
        </el-form-item>
    </el-form>
</div>
<!-- 引入組件庫 -->
<script type="text/javascript" src="${ctx}/static/common/js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script type="text/javascript">

    new Vue({
        el: "#app",
        data: {
            form : {
            }
        }
    });
</script>

</body>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue+elementUI在輸入框中按回車鍵會刷新頁面 element-ui中搜索框回車刷新頁面問題的解決方法 Vue -- element-ui el-input組件回車刷新頁面問題鼠標聚焦到Input輸入框時，按回車鍵刷新頁面原因及解決方法 vue:element-ui輸入框綁定回車事件 Vue項目刷新頁面 IE/360 瀏覽器 input輸入框不清空問題處理 element-ui的el-input回車刷新頁面 bootstrap表單按回車會自動刷新頁面的問題 js阻止表單默認提交、刷新頁面阻止form表單submit提交后刷新頁面