Vue.jsでsubmitしたときに起きたこと

Vue.jsを使ってタスク管理アプリを作ってみたとき、PCではタスクの新規登録ができたのにスマホでは登録できないという事態に陥り詰まってしまったのでその理由と解決方法のメモ

PCでは大丈夫なのに

ローカル上で動作を確認（その時は問題なく動いていた）してherokuにデプロイ。その後PCで動作確認しいざスマホで使ってみようとすると何故かタスクの新規登録ができない。新規登録をスマホでする際の挙動を確認してみると。毎回ページがリロードされていることに気づいた。

原因

原因を探ってみると、submitボタンを押したときにVue.js(javascript)が動作する前にsubmitボタンの機能（フォーム送信）が働いてしまい画面遷移が起こってしまうのがダメだった模様。

対策

Vue.jsを使っての非同期処理でタスク作成をするので、submitボタンの機能そのものは必要ない。ただボタンとして押せればよかった。なのでボタンのtype属性を変更した。

<template>
  <div id="create-modal">
     <form>
      .
      .
      .
      <button type="button" class="submit-btn"  @click="handleCreateTask">新規登録</button>
    </form>
  </div>
</template>

buttonの初期のtype属性は「submit」であるため、送信ボタン扱いになってしまい通信が発生してしまう。type属性に「button」を指定することによって「押せはするけれども、送信はしない」状態を作ることによってjavascripがうまく動作し、タスクの新規作成ができるようになった。

ただPCでは作れるけどスマホでは作れないというのが謎なので、分かったら追記したい。