Check out this fiddle I created: 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')
}
}
})
This scenario mirrors a situation I encountered in my Vue application.
In this case, a second button only appears when a specific condition is met. This condition is triggered by hitting the enter key in the input field.
Strangely, after the condition is met and the second button is shown, hitting enter again or clicking elsewhere and returning focus to the input triggers the second button...
I'm yet to determine the cause of this and how to prevent it.