@ click事件未与带有@blur的元素一起触发

Question

[使用VueJS时遇到问题，这有点困扰我，因为我知道它可能只依赖很小的东西，但我仍然在这里尝试使其运行数小时。

我正在使用一个模板，该模板应表示带有其下的解决方案的搜索栏。为了显示解决方案，我正在遍历一个对象（我还没有完成对这一点的解决方案的筛选-想要先完成这一点）。我现在想做的事情是用在解决方案中选择的值填充searchbar值（将click事件传递给它）。但是不知何故，我的点击事件不会触发。

我有以下代码段：

<template>
    <div class="input-group">
        <div class="input-group-prepend">
            <div class="input-group-text">&#128269;</div>
        </div>
        <input 
            type="text" 
            class="form-control"
            @focus="searchFocus = true"
            @blur="searchFocus = false"
            v-model="searchQuery"
            placeholder="Search for vehicles..">
        <div class="container p-0">
            <div class="dropdown-menu search" v-show="searchFocus">
                <a class="dropdown-item bus" href="#" 
                    v-for="vehicle in vehicleObjects" 
                    :key="vehicle.id.key"
                    v-on:click="setSelectedToQuery(vehicle)">
                    <span class="ml-4">Bus {{ vehicle.id.name }}
                        <span class="badge badge-secondary"> {{ vehicle.licenseNumber }}</span>
                    <span>
                </a>
            </div> 
        </div>
    </div>
</template>

我是否遗漏了一些显而易见的东西？如何使点击事件开始运行/触发？

提前感谢

最好的问候

Answer 1

有几件事“关闭”，我将按影响程度列出它们

• [@blur]在点击前触发，实际上使@click无效>
• 锚<a ...>需要防止重定向。您可以使用@click.prevent="...阻止事件传播，也可以使用其他元素，因为无论如何您都没有定义href。
• 您的span元素之一未关闭（<span>而不是结尾的</span）

要处理@blur阻止@click，您可以使用@mousedown代替@click，因为它首先执行。

Answer 2

也许是解决方法：关闭上一个跨度