如何在输入集中时阻止表单提交，并在不集中时使用vuejs2启用表单提交？

Question

I am working on a form with a vue component that has an autocomplete functionality, I would like to let user select from suggestions. 我正在使用具有自动完成功能的vue组件处理表单，我想让用户从建议中进行选择。 I am handling keyup events for up, down and enter. 我正在处理向上，向下和进入的键盘输入事件。 Unfortunately, when enter is hit, the form is submitted. 不幸的是，当按下回车键时，将提交表单。 I would like to prevent form submit if the input field is focused. 如果输入字段集中，我想防止表单提交。 I have tried using v-on:submit.prevent in the form tag but that disables form submit completely and I need to create an separate form submit function. 我已经尝试在form标签中使用v-on：submit.prevent，但是它完全禁用了表单提交功能，我需要创建一个单独的表单提交功能。

Answer 1

You could do it like this. 您可以这样做。 But I don't really know vue so I might be wrong. 但是我不太了解vue，所以我可能是错的。

 window.onload = function() { new Vue({ data() { return { focused: false } }, methods: { onSubmit: function() { return this.focused; } } }).$mount('#app') }

 <html> <head> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script> </head> <body> <div id="app"> <form v-on:submit="onSubmit"> <input type="text" @focus="focused = true" @blur="focused = false" /> <button :disabled="focused">Submit</button> </form> </div> </body> </html>

如何在输入集中时阻止表单提交，并在不集中时使用vuejs2启用表单提交？

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-07-10 09:58:10

如何在输入集中时阻止表单提交，并在不集中时使用vuejs2启用表单提交？

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-07-10 09:58:10

解决方案1
0 已采纳 2017-07-10 09:58:10