如何在输入聚焦时防止表单提交并在 vuejs2 失焦时启用它？

【问题标题】：How to prevent form submit when input is focused and enable it when out of focused with vuejs2?如何在输入聚焦时防止表单提交并在 vuejs2 失焦时启用它？
【发布时间】：2017-12-13 22:00:03
【问题描述】：

我正在开发一个带有自动完成功能的 vue 组件的表单，我想让用户从建议中进行选择。我正在处理向上、向下和输入的 keyup 事件。不幸的是，当输入被击中时，表单被提交。如果输入字段被聚焦，我想阻止表单提交。我曾尝试在表单标签中使用 v-on:submit.prevent 但这会完全禁用表单提交，我需要创建一个单独的表单提交函数。

【问题讨论】：

标签： javascript vuejs2 vue-component

【解决方案1】：

你可以这样做。但是我真的不知道 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>

【讨论】：