Vue - pressing enter key in input causes app to reload

Using version: 2.0.10

Whenever I press the “enter” key in this text input, the app reloads.

The code below is the culprit. Whether or not I have the v-on:keyup does not affect the behavior at all. It always reloads.

          placeholder="Add this"
          v-on:input="supplyToAdd = $"

I don’t know anything about vue, but this sounds like you have a form element around your input which is submitted each time you push the enter button.

1 Like

Yes I do. Could be a pebkac issue.

Sound like you have wrapped it in <form> tag and you have <input type="submit"> in this form. In this case it will submit the form on enter click. You need to prevent form submit on form’s submit event

Here’s the form.

<!--radio select join or create-->
<!--selection determines which button is shown and which instruction are displayed-->

<f7-list-item radio name="Join-Create"
              @change="toJoin = true"
              :title="'Join an existing house'"></f7-list-item>
<f7-list-item radio name="Join-Create"
              @change="toJoin = false"
              :title="'Create a new house'"></f7-list-item>


  <!-- only the button changes each calls a different function-->
  <f7-input type="text"
            placeholder="House name"
            v-on:input="formData.houseName =$"></f7-input>

  <f7-input type="text"

  <f7-input type="text"
            v-on:input=" =$"></f7-input>

  <f7-input type="text"

  <f7-button small round fill color="green" v-if="!toJoin && isformFilled">Create a House</f7-button>
  <f7-button small round fill
             v-if="!toJoin && !isformFilled"
  @click="createHouse">Create a House</f7-button>

  <f7-button small round fill v-if="toJoin && isformFilled">Join a House</f7-button>
  <f7-button small round fill color="gray" v-if="toJoin && !isformFilled">Join a House</f7-button>


Same problem here. No form or submit.

Are you also using Vue js?


I also tried keypress.enter documented here:

But the solution is to remove form - i had it in f7-list form - after removing it the enter stoped reloading (it’s doing nothing now but keypress or keyup still do not catch event)

1 Like

Try v-on:keypress.native=“onKeypress” and handle your enter key manually in onKeypress method

I have this issue also and I’ve discovered it is if you have just one input element wrapped in a form. My workaround was to add a 2nd input element and hide it with css.


you are correct. In my case, I found forms with only one input will have this issue. For forms with multiple inputs, it is fine. I fix this with remove the form tag like:

<f7-list form id="thisisaformid">

change it to

<f7-list id="thisisaformid">

And it works well with my previous code. Even the
it can work.

but surely if you remove the form tag you lose the changes the browser makes to the soft keyboard to navigate between fields - which was the reason I started wrapping my inputs with a form …

it worked for me as well

Worked for me as well, thanks :slight_smile:

You can add v-on:submit.prevent to <form>

don’t worry
this is bug in vue js
Usually this problem appears when there is only one field in the form
no prolim in enter.submit

it works, thanks。but really want to know what cause the issue