Почему v-on:click срабатывает при нажатии на Enter?

Question

[ruslanbm29]

Здравствуйте, есть форма, если ввести текст и нажать Enter - то срабатывает "clearQuery()" и поле очищается. Само событие "clearQuery()" привязано к кнопке для быстрой очистки поля. Но задумка в том что она должна срабатывать только когда непосредственно на нее кликнуть мышью v-on:click.left. А при нажатии на Enter форма должна отправляться.

<form method = "GET" class = "row align-items-center" action ="/search/index.php" >
	<div class = "query" v-bind:class = "{ 'query-small': !isEmptyField || isEdit }">
		<label class = "col-12" for = "#searchQuery" >Поиск врачей, клиник, диагностик, анализов, городов</label>
	        <input name = "query" class = "col-12" type="text" id = "searchQuery" autocomplete="off" v-model.trim = "query" @focus = "focusQuery()" @blur = "blurQuery()" @click = "clickQuery()" required minlength = "3" />
		<button class = "close" v-bind:class = "{ 'active' : !isEmptyField }" v-on:click.left = "clearQuery()"></button>
	</div>
<button class = "search" type = "submit">
	<span class = "d-none d-md-inline-block">Найти</span>
	<img class = "d-inline-block d-md-none" src = "{THEME}/img/icons/search.png" />
</button>
</form>

Answer 1

[Aetae]

Vue тут не при чём, обычная легаси логика поведения формы:

<form>
  <input />
  <button onclick="alert('Такие дела')"></button>
</form>

Тянется ещё с тех времён, когда вэб - это было "не серьёзно", и браузеры считали, что думать за криворуких веб-мастеров и считать enter кликом - это всем на пользу.