Alpine.jsを使用してsubmitイベントのデフォルト動作を防止する方法

Alpine.jsをHTMLページに追加します。CDNから読み込む場合は、以下のスクリプトタグを<head>セクションに追加します。

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/alpine.js"></script>

フォーム要素を作成し、x-data属性を使用してAlpine.jsを有効にします。

<form x-data="{ submitForm: function(event) { event.preventDefault(); /* ここにコードを追加 */ } }">
  <!-- フォームの内容を追加 -->

  <button @click="submitForm">送信</button>
</form>

x-data属性の値としてオブジェクトを定義し、submitFormメソッドを作成します。このメソッドは、引数としてイベントオブジェクトを受け取り、event.preventDefault()を呼び出してデフォルトの動作を防止します。
submitFormメソッド内で、フォームの送信に関連する処理を追加します。例えば、フォームデータのバリデーションや非同期リクエストの送信などの処理を行うことができます。

これで、Alpine.jsを使用してフォームのsubmitイベントのデフォルト動作を防止することができます。追加のコードをsubmitFormメソッド内に書くことで、フォームの送信に関連するカスタム処理を実装することもできます。