Vue.jsでのフォームの送信時にページがリロードされる問題の解決方法

この問題は、フォームのデフォルトの送信動作に関連しています。通常、HTMLのフォームは、送信時にページをリロードするように設定されています。しかし、Vue.jsを使用している場合、一般的にはAjaxリクエストを使用してデータを送信し、ページのリロードを防ぐことが望ましいです。

<form @submit.prevent="submitForm">
  <!-- フォームのコンテンツ -->
  <button type="submit">送信</button>
</form>

上記のコードでは、@submit.preventディレクティブを使用して、フォームの送信イベントをキャンセルしています。submitFormメソッドは、フォームのデータを収集し、適切な処理を行うためのメソッドです。

次に、Ajaxリクエストを使用してデータを送信する必要があります。Vue.jsでは、axiosやfetchなどのライブラリを使用することが一般的です。以下のコード例では、axiosライブラリを使用してフォームデータを送信しています。

methods: {
  submitForm() {
    axios.post('/api/submit', this.formData)
      .then(response => {
        // 成功時の処理
      })
      .catch(error => {
        // エラー時の処理
      });
  }
}

上記のコードでは、submitFormメソッド内でaxios.postを使用してフォームデータを送信しています。成功時とエラー時の処理は、適宜追加してください。