Vuejs form not submitting on "enter"

Question

TL;DR Question

Why can I not use 2 of the same input fields in a form, and the enter button submit the form

More detailed question

Straight to the point. I'm trying to use the enter button to submit a form when an input element is focussed, which should then emit an event.

• I've written a codepen here which replicates the "weird" behaviour: https://codepen.io/anon/pen/gqGMmW

As you can see, if I have more than 1 input of the same type (for example, 2 input="text" inputs, when i press the enter button when focuses on an input, it fails to emit the submit event.

In the second app example directly below it, I have the exact same form, with the exact same vuejs instantiation, but with only one input field, and when you press enter when focuses on that element it correctly emits the submit event.

I've tried to google what might be going on here, but struggling to find much of any use apart from "prevent form being submitted on enter".

I've tried adding an ID attribute, a name attribute etc to the element, and it still doesn't work as expected.

I'm not beginner at vuejs, but not an advanced JS user either, so "simple" answers would be appreciated :D

---

If more information is needed, please let met know and I'll provide as much as I can

Answer 1

Make sure that your form has either

<button type="submit">Submit</button>

or

<input type="submit" value="Submit" />

---

If you don't want to show the button, you can use

<input type="submit" style="position: absolute; left: -9999px"/>

You can find more information about hiding the button in this question Submitting a form by pressing enter without a submit button