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

Question

我在使用 VueJS 时遇到了一个问题，这有点让我感到厌烦，因为我知道它可能依赖于非常小的东西，但我仍然在这里试图让它运行几个小时。

我正在使用一个模板，它应该代表一个搜索栏，下面有解决方案。 为了展示解决方案，我在 object 上循环（我还没有完成对解决方案的过滤 - 想先完成这个）。 我现在尝试做的事情是在解决方案中用值 I select 填充搜索栏值（通过点击事件传递它）。 但不知何故，我的点击事件没有触发。

我有以下代码片段：

<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无效
• anchors <a...>需要防止重定向。 您可以使用@click.prevent="...来防止事件传播，或使用其他元素，因为您还没有定义href 。
• 您的span元素之一未关闭（最后是<span>而不是</span ）

要处理@blur阻塞@click ，您可以使用@mousedown而不是@click ，因为它首先执行。

Answer 2

也许这是解决方案：关闭你的最后一个跨度

点击为我工作： https://codesandbox.io/s/morning-browser-fgftf