Question

我有一个表单，我正在尝试捕获提交事件，以防用户在文本输入中点击回车键。

这很好用UNTIL我也尝试抓住按钮点击并阻止默认操作。

我希望能够处理按钮单击并在输入内输入不同的键 - 但该按钮覆盖了表单的submit.prevent方法。

请参阅下面的示例，第一个文本字段和按钮触发“一个事件”，但第二个表单在按钮上有一个事件，但这会覆盖表单提交。

我希望输入中的回车键将标题设置为“两个事件” 但是将标题设置为“双”的按钮

是否与事件冒泡有关？

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>

Answer 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>

VueJS表单与输入事件

1 个答案: