Vue.js 意外触发按钮

Question

我准备了一个小提琴：https://jsfiddle.net/frvuw35k/

<div id="app">
  <h2>Vue Event Test</h2>
  <form @submit.prevent>
    <div class="form-group row">
            <div class="col-sm-12 input-group">
                <input v-model="search" class="form-control" placeholder="Search users by Display Name"
                            @keyup.enter="doSearch">
                <div class="input-group-append">
                    <button class="btn btn-primary" :disabled="!search" type="button"
                                @click.prevent="doSearch">
                            Search
                    </button>
                </div>
            </div>
        </div>
    <div class="form-group row">
                <div class="col-12">
                    <button v-if="showButton" class="btn btn-info"
            @click.prevent="doSthElse">Do something else</button>
                </div>
            </div>
  </form>
</div>

new Vue({
  el: "#app",
  data: {
    search: null,
    showButton: false
  },
  methods: {
    doSearch: function(){
        console.log('do search:', this.search)
      this.showButton = true
    },
    doSthElse: function(){
        console.log('do something else')
    }
  }
})

这模拟了我在 Vue 应用程序中遇到的问题。

还有第二个按钮，当满足条件时显示。此条件是搜索的结果，通过在输入上按 Enter 键触发。

在满足条件后第二次输入时，如果单击其他地方并将焦点重新放在输入上，则触发第二个按钮...

我不明白原因，也没有找到避免它的方法。

Answer 1

说明

这是由表单中的浏览器行为引起的。

正常的行为是当用户在输入中按下Enter键时，它会提交表单。

此外，要提交表单，浏览器会在表单中查找一个按钮，在您的情况下，这就是您的“执行其他操作”按钮。

所以当用户按下 Enter 时，它会在你的最后一个按钮上触发一个按钮按下，调用 doSthElse 方法。

如何解决

要解决此问题，只需在表单上添加 @keydown.enter.prevent 侦听器以防止触发默认行为。

我用修复更新了你的小提琴：https://jsfiddle.net/vy57d63f/

Answer 2

使用这个：你需要使用@keydown 并防止修饰符

<input v-model="search" class="form-control" placeholder="Search users by Display Name"
                        @keydown.enter.prevent="doSearch"/>