DEV Community

loading...

Discussion on: If there is an input, there should be a form

Collapse
patarapolw profile image
Pacharapol Withayasakpunt

A common pattern I use in Vue

<form @submit.prevent="doSearch">
  <input
    name="q"
    type="search"
    v-model="q"
    @keydown.enter="doSearch" />
  <button type="submit">Submit</button>
</form>
Enter fullscreen mode Exit fullscreen mode

It works not only on Desktop, but also on Mobile.

I also realized that not only <form> is important, but also <button type="submit">.

Collapse
tomekdev_ profile image
🤓 Tomek Nieżurawski Author

I'm not very familiar with Vue but I think you can omit:

@keydown.enter="doSearch"
Enter fullscreen mode Exit fullscreen mode

The beauty of <form></form> + <button type="submit">Submit</button> is that you don't have to manually handle ENTER key on an input. Which is very convenient if you have multiple inputs :)