Why does v-on:click fire when I press Enter?

Question

Vue.js

Hello, there is a form, if you enter text and press Enter, then "clearQuery ()" is triggered and the field is cleared. The "clearQuery()" event itself is bound to a button to quickly clear the field. But the idea is that it should only work when the mouse directly clicks on it v-on:click.left. And when you press Enter, the form should submit.

<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

Vue has nothing to do with it, the usual legacy logic of the form behavior:

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

It has been dragging on since the days when the web was "not serious", and browsers believed that thinking for crooked webmasters and considering enter as a click is for everyone's benefit.