模糊事件取消Vue组件中的单击事件

Question

我在Vue.js中有一个搜索组件。当您在文本输入中键入时，将从服务器获取一个搜索结果列表，然后显示在搜索字段下方的列表中。单击其中一个结果时，会触发submit事件。

然而，现在我尝试在文本输入中添加一个模糊事件，当用户点击远离输入时，它应该会隐藏结果列表。这很好，除了一个关键情况——点击结果不再触发submit事件。

我理解为什么会这样——blur事件显然在click事件之前触发，并在其中一个结果上注册单击之前隐藏结果列表。我的问题是，我该如何解决这个问题？当在文本输入之外单击时，我需要关闭结果列表，但显然我也需要submit方法来发挥作用。

以下是完整的组件：

<template>
<div class="search basic-search">
<input type="text" v-model="search_string" v-on:keyup="search" v-on:focus="activate" v-on:blur="inactivate" class="form-control search" placeholder="Search stocks" />
<div :class="['search-results', active === true ? 'active' : '']">
<div class="search-result" v-for="result in search_results" v-on:click="submit(result.id)">
{{ result.name }} ({{ result.ticker }})
</div>
</div>
</div>
</template>
<script>
export default {
data: function() {
return {
search_string : '',
search_results : [],
active : false
};
},
methods : {
search : function() {
const axios_data = {
_token  : $('meta[name="csrf-token"]').attr('content'),
str : this.search_string
};
axios.post('/stock-search', axios_data).then(response => {
if(response.data.success){
this.search_results = response.data.stocks;
this.active = true;
}
});
},
activate : function() {
if(this.search_string !== '')
this.active = true;
},
inactivate : function() {
this.active = false;
},
submit : function(stock_id) {
document.location = "/graphs/" + stock_id;
}
}
}
</script>

Answer 1

您可以延迟隐藏盒子，直到click触发

inactivate : function() {
setTimeout( () => this.active = false, 100)
},

您也可以尝试使用mousedown而不是click

<div class="search-result" v-for="result in search_results" v-on:mousedown="submit(result.id)">

我不知道事件的顺序是否已经确定，但mousedown应该在模糊之前触发。