VueJS форма ввода мероприятия против

У меня есть форма, и я пытаюсь поймать событие submit, если пользователь нажимает клавишу enter внутри текстового ввода.

Это работает нормально, пока я также не попытаюсь поймать щелчок кнопки и предотвратить действие по умолчанию.

Я хочу иметь возможность обрабатывать кнопку click и enter ключ внутри ввода по-разному - но кнопка переопределяет метод формы submit.prevent.

Смотрите пример ниже, первое текстовое поле и кнопка запускают "одно событие" , но вторая форма имеет событие на кнопке, но это переопределяет форму отправить.

Я хочу, чтобы клавиша enter на входе установила заголовок "два события" но кнопка для установки заголовка на "double"

Это как-то связано с бурлящим событием?

var myApp = new Vue({
	'el' : '#myApp',
  'data': {
  	'title' : 'potato'
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<div id="myApp">
  
  <h1>
    {{title}}
  </h1>

  <form method="POST" @submit.prevent="title = 'one event'">
    <input type="text" />
    <button>One event</button>
  </form>
  
  <form method="POST" @submit.prevent="title = 'two events'">
    <input type="text" />
    <button @click.prevent="title = 'double'">Two events</button>
  </form>  
</div>
1 2
javascript forms events vue.js vuejs2

1 ответ:

Поскольку вы все равно не даете формам отправляться, почему бы не изменить тип кнопки (по умолчанию-отправить).

<button type="button" @click="title = 'double'">Two events</button>


var myApp = new Vue({
	'el' : '#myApp',
  'data': {
  	'title' : 'potato'
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<div id="myApp">
  
  <h1>
    {{title}}
  </h1>

  <form method="POST" @submit.prevent="title = 'one event'">
    <input type="text" />
    <button>One event</button>
  </form>
  
  <form method="POST" @submit.prevent="title = 'two events'">
    <input type="text" />
    <button type="button" @click.prevent="title = 'double'">Two events</button>
  </form>  
</div>
2