javascript - @click 事件不会与带有 @blur 的元素一起触发
问题描述
我在使用 VueJS 时遇到了一个问题,这有点让我感到厌烦,因为我知道它可能依赖于非常小的东西,但我仍然在这里试图让它运行几个小时。
我正在使用一个模板,它应该代表一个搜索栏,下面有解决方案。为了显示解决方案,我正在循环一个对象(我还没有完成对解决方案的过滤 - 想先完成这个)。我现在尝试做的事情是用我在解决方案中选择的值填充搜索栏值(通过点击事件传递它)。但不知何故,我的点击事件没有触发。
我有以下代码片段:
<template>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">🔍</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>
我错过了一些非常明显的东西吗?如何让点击事件运行/触发?
提前致谢
此致
解决方案
很少有“关闭”的事情,我将按影响程度列出它们
@blur
在点击之前触发,本质上是无效的@click
- 锚点
<a ...>
需要防止重定向。您可以使用@click.prevent="...
来防止事件传播,或使用其他元素,因为您还没有href
定义。 - 您的
span
元素之一未关闭(<span>
而不是</span
最后)
要处理@blur
阻塞@click
,您可以使用@mousedown
而不是@click
,因为它首先执行。
推荐阅读
- c# - 在同一方法中使用 ngWebDriver(量角器)和驱动程序(Selenium)时出现对象引用错误
- sql-server - MSSQL Select - 删除重复项不起作用
- angular - 在 Mat-Dialog(Angular Material CDK)上拖放不起作用。错误的先前和当前索引
- java - 如何对存储对象的数组列表的元素求和
- reactjs - 手机语言更改时如何禁用rtl?
- reactjs - React - 在呈现获取的数据之前显示加载消息
- javascript - payumoney 支付集成上的哈希密钥生成错误
- python - 无法在 for 循环中获取所有图像 url
- php - 如何修复 Excel 导出功能中未找到的类“ZipArchive”
- string - 如何使用 T-SQL 按字母顺序对一行中的值进行重新排序?