## 事象
以下のようなコードだと、Enterを押したあとアラートは表示されるが、その後にページの再読み込みがされてしまう。
```html
<template>
<v-app>
<v-main>
<v-form @submit="showAlert">
<v-text-field
v-model="value"
type="text"
label="入力欄"
class="text-field"
/>
</v-form>
</v-main>
</v-app>
</template>
<script setup>
import { ref } from 'vue'
const value = ref('Hello World!')
const showAlert = () => alert("hello!")
</script>
```
## 解決方法
[[prevent modifier (Vue)|prevent modifier]]を使う。`v-form`を以下のように変更。
```diff
- <v-form @submit="showAlert">
+ <v-form @submit.prevent="showAlert">
```
<button class="playground"><a href="https://play.vuetifyjs.com/#eNqlUctO6zAQ/RXjTYvUxBd1c1W1qOzuH9wFZuEmE9X3+iXbCaCqO9jwC6zZ8VvwHYyTtITAAomscjxn5pwzc7mjF87lTQ10QZcRtFMiwjk3hCybTDjX/rZAC2l61OLKek3Wod5oGVechq29vlDgI6dHVkeMcBOzSoIqB+/44UhbgsLeRqgaOP1YjrcOsJa6xyUlNm3fy/3Ty8Pj6/PdmFAoEULf3EsPGew9B+uCHGIiPOZMoNvAkg02gzAUXrpIAsQ6laV21keyIx4qsieVt5pMcKWTRC6sCZG0CckqMaaTP6CUJX+tV+XJ5PRAOS4QadNTsjonIqEpp9vEP+EUqUvWaaMqndFOGB27/F+wBk+4S8Z5XwicLkj7kt7QUMI4LkYXFowVpcE2vIBsfG4gMuM0WyON+dpEqSErrV7P83n+KxPKbUX+m5UyxGE5h6CzjbfXATwO43Q2kIuyuv2GZM9EpbP8bN5J9G8ZXjokjU+zGQo24DMPpgQP/rvRRm1fxRtRPkVMLvbc7PEASpr/YbT7IrR7vzyY/Vn2dloadZUU9zP6wTBa6Drp1Rta1Dub">Playground</a></button>