todoリストを例に説明していきます。
inputの値を取得して、submitイベントでtodoリストに追加していくというものです。
※todoリストに追加していくロジックは今回関係ないので省略します。
<form @submit.prevent="addTodo">
<input type="text" ref="comment">
<button type="submit">追加<button>
</form>
入力・追加のコンポーネントを作っているときに、2点の疑問が起こりました。
- submitイベントが
<button>ではなく、<form>についているのはなぜか - submitにpreventを付ける必要があるのか
submitイベントが<button>ではなく、<form>についているのはなぜか
vue以前の理解不足でしたが、submitイベントは<button>や<input type="submit">ではなく、<form>で発生するものでした。
submit イベントは
<form>要素自身で発生するものであり、その中の<button>や<input type="submit">で発生するものではないことに注意してください。submit イベントは、ユーザーが送信ボタン (
<button>または<input type="submit">) を押したり、 Enter キーをフォーム内のフィールド (例えば<input type="text">) の編集中に押したりしたときに発生します。このイベントはform.submit()メソッドを呼び出した場合には送信されません。
submitにpreventを付ける必要があるのか
submitイベントが本来、action属性での画面遷移を想定しているので、意図しない画面遷移を避けるためにpreventを使います。
todoアプリではsubmitしたときに画面遷移を意図しているわけではないので、preventを付けるということでした。