[html] inputが１つだけのフォームで入力後Enterを押すと勝手にリロードされる場合の対策

趣味でVue.jsを使ったページを作っていたら、inputをEnterすると勝手にリロードされる現象にハマったので原因と対策をメモ

原因

Vue.jsが原因かとおもってだいぶ調べたんですが、どうもformの中にinputが１つだけだと勝手にsubmitされる仕様があるらしいです。

【HTML】入力欄が1つだけのフォームはEnterキー押下でsubmitされる。submitボタンがなくても。 at softelメモ

まったく知らなかったんですがWeb屋さんでは常識なんですかね・・・？（どういった場面で便利なのか・・・）

対策

以下の方法で対策できました。

対策１：formのonsubmitを無効化する
対策２：formの中の入力欄を必ず２つ以上にする（１つだけにしたい場合はダミーのinputを追加する）

index.html

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>

<div id="app">
    <form>
        <!-- Enterでリロード(submit)される -->
        <input v-model="inputText" type="text">
    </form>
    <form onsubmit="return false;">
        <!-- 対策1 -->
        <input v-model="inputText" type="text">
    </form>
    <form>
        <!-- 対策2 -->
        <input v-model="inputText" type="text">
        <input type="text" style="display: none;"/>
    </form>
</div>

<script>
(function() {
'use strict';

var app = new Vue({
    el: "#app",
    data: {
        inputText: "テスト(input)"
    }
});

})();
</script>

参考

【HTML】入力欄が1つだけのフォームはEnterキー押下でsubmitされる。submitボタンがなくても。 at softelメモ
javascript - Why does forms with single input field submit upon pressing enter key in input - Stack Overflow