启动了vue嵌套事件，但省略了父事件

Question

我使用这个库进行自动完成选择，在我的逻辑中，我还想动态触发require验证(来自vuelidate库(。当用户将注意力集中在输入上以及当用户从建议列表中选择某个值时，我希望触发require验证规则。

出于某种原因，当我第一次从建议列表中选择一个值时，它会触发focusout事件而不是select，可能b-z列表不在输入焦点范围内，但当我第二次从列表中选择项目时，它触发的是select事件而非focusout(应该如此(。注意：只有当我第二次、第一次、第三次和所有下一次选择值时，vue才会触发select事件，它总是触发focusout事件。

问题：为什么不触发select事件，如何强制触发？？

代码片段：

<vue-simple-suggest v-model="city.searchInput" 
:debounce="300" 
:min-length="2" 
display-attribute="name" 
value-attribute="id" 
:list="getCity" 
:filter-by-query="true" 
@select="citySelect">
<input type="search" 
class="form-control" 
placeholder="Place of birth" 
@focusout="cityError" />
</vue-simple-suggest>

methods: {
cityError() {
console.log('cityError');, // <== when I select some item from suggestions list by the first time this event triggered
},
citySelect() {
console.log('citySelect'); // <== when I'm clicking by input second time (the suggestions list already loaded) and select some (or same) value from suggestions list this event triggered
},
getCity() {
// here should be ajax call, but for now just dummy data
return [{
"id": "691b237b0322f28988f3ce03e321ff72a12167fd",
"name": "Paris",
"lat": -33.8599358,
"lng": 151.2090295
},
{
"id": "691b237b0322f28988f3ce03e321ff72a12167fs",
"name": "New York",
"lat": -33.8599358,
"lng": 151.2090295
},
]
}
}

我在github上打开了一个问题https://github.com/KazanExpress/vue-simple-suggest/issues/353(它有详细的信息和显示问题的小视频，你可以查看浏览器控制台(，但我不确定它是否与库有关。

提前感谢！

Answer 1

我在库的文档中看到它允许模糊事件。你能在vue-simple-suggest组件中尝试@blur而不是在输入中尝试@focusout吗？

否则，您可以在@select="checkCitySelection"中运行控制器以避免输入中的@focusout事件：

checkCitySelection(citySelected) {
this.$v.city.value.$touch();
if (this.$v.city.value.$invalid) this.cityError()
else this.citySelect();
}