@click事件不会与@blur元素一起触发。

Question

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

我正在使用一个模板，它应该代表一个搜索栏，下面有解决方案。为了显示解决方案，我在一个对象上循环（我还没有完成包括解决方案的过滤到这一点--想先完成这个）。我现在想做的事情是用我在解决方案中选择的值填充搜索条的值（用点击事件传递）。但是不知道为什么我的点击事件没有触发。

我有下面的代码片段。

<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

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

点击为我工作。https:/codesandbox.iosmorning-browser-fgftf。