Vue.jsでto doアプリを作りたい

前提・実現したいこと

現在vue.jsの基礎勉強のためtodoアプリを作っています！

発生している問題・エラーメッセージ

上のTitleの部分のinputタグにテキストを記入し、Enterキー押して
下のリストにvue.jsで表示していきたいのですが、

Enterキーを押すとページが更新されてしまい、
リストに記録が残りません。

該当のソースコード

HTML
1  <div id="app">
2    <section class="main">
3      <div class="addMenu">
4        <form class="addMenu__items">
5          <input 
6          autofocus 
7          autocomplete="off" 
8          class="addMenu__text" 
9          type="text" 
10          placeholder="Title..." 
11          v-on:keyup.enter="addToDo" 
12          v-model="newToDoTitle"
13          >
14        </form><!-- /.addMenu__items --> 
15      </div><!-- /.addMenu -->
16
17      <div class="listWrapper">
18        <ul id="lists" class="list__items">
19
20          <li class="list__item" v-for="toDo in toDos">
21            <input 
22            class="list__item__checkbox" 
23            id="scales" 
24            name="scales"
25            type="checkbox" 
26            >
27            <label for="scales">{{ toDo.title }}</label>
28          </li><!-- /.__list__item -->      
29              
30        </ul><!-- /.list__items -->
31      </div><!-- /.listWrapper -->
32    </section><!-- /.main -->
33  </div><!-- /#app -->
34
35
36  <script>
37    let app = new Vue({
38      el: '#app',
39      data: {
40        newToDoTitle: null,
41        toDos: [
42          {title: 'test'},
43          {title: 'test'},
44          {title: 'test'},
45        ] 
46      },
47
48      methods: {
49        addToDo() {
50          this.toDos.push({title: this.newToDoTitle});
51        }
52      }
53    });
54  </script>
55

補足情報（FW/ツールのバージョンなど）

Vue.jsのとても初心者で、解決方法が見出せませんでした。
どなたか教えていただけないでしょうか。

行動規範の内容に同意します

回答1件

ベストアンサー

上記コードのようにinputが一つだけある状態だと、Enterキーを押した場合、自動でsubmitされます。
上記のコードでEnterを押すと更新されるのはこれが原因と思われます。
参照：HTML 5の仕様

4.10.21.2 Implicit submission

A form element's default button is the first submit button in tree order whose form owner is that form element.

If the user agent supports letting the user submit a form implicitly (for example, on some platforms hitting the "enter" key while a text control is focused implicitly submits the form), then doing so for a form, whose default button has activation behavior and is not disabled, must cause the user agent to fire a click event at that default button.

これの対策として、
・formのsubmitを無効化する
・同一formタグ内にinputを２つ以上配置しておく
等の方法があります。

1番目「formのsubmitを無効化する」方法：
form内で、onsubmitイベント属性の値に"return false;"というシンプルなスクリプトを設定するか、
v-on:submit.preventを指定します(link)。（この他にもやり方はいくつかあります）

diff
1<div id="app">
2    <section class="main">
3      <div class="addMenu">
4-        <form class="addMenu__items">
5+        <form class="addMenu__items" onsubmit="return false;">
6または
7+        <form class="addMenu__items" v-on:submit.prevent>

　

別の方法：

　ブラウザのinputコンポーネントはkeydownイベントが発火した段階でenterキーが押されたことを検知し、
上記の単一form状態でsubmitを無効化していなければ、ページが更新されます。

これはVueがkeydownイベントを処理する前に起こります。

そしてVueはページ更新後にkeyupイベントを検知して、空白状態のinputボックスの内容を読み取ってしまうために、空白のtitleが追加されてしまいます。

したがって、keydownイベントをキャンセルして、submit動作を防いだうえでkeyupイベントを検知すればよいことになります。

このためには、inputタグ内で、v-on:keyup.enterとともに、v-on:keydown.enter.preventを指定します。

diff
1<div id="app">
2    <section class="main">
3      <div class="addMenu">
4        <form class="addMenu__items">
5          <!-- <form > -->
6            <input 
7              autofocus 
8              autocomplete="off" 
9              class="addMenu__text" 
10              type="text" 
11              placeholder="Title..." 
12+             v-on:keydown.enter.prevent 
13              v-on:keyup.enter="addToDo" 
14              v-model="newToDoTitle"
15            >