Vue.jsでフォームの送信を阻止する方法とそのコード例

1. イベントハンドラ内でpreventDefault()を呼び出す方法:

<template>
  <form @submit="handleSubmit">
    <!-- フォームの入力フィールドなど -->
    <button type="submit">送信</button>
  </form>
</template>
<script>
export default {
  methods: {
    handleSubmit(event) {
      event.preventDefault(); // フォームのデフォルトの送信を阻止
      // その他の処理
    }
  }
}
</script>

2. メソッド内でpreventDefault()を呼び出す方法:

<template>
  <form>
    <!-- フォームの入力フィールドなど -->
    <button type="submit" @click="handleSubmit">送信</button>
  </form>
</template>
<script>
export default {
  methods: {
    handleSubmit(event) {
      event.preventDefault(); // フォームのデフォルトの送信を阻止
      // その他の処理
    }
  }
}
</script>

上記の例では、event.preventDefault()を使用してフォームのデフォルトの送信を阻止しています。1つ目の例では@submitディレクティブを使用してフォームのsubmitイベントをハンドリングし、2つ目の例では@clickディレクティブを使用してボタンのクリックイベントをハンドリングしています。

これらの方法を使用することで、Vue.jsでフォームの送信を阻止することができます。必要に応じて追加の処理やバリデーションを行うことも可能です。