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"/>

Vue.js意外触发按钮

2 个答案:

说明

如何修复