使用 Vue3 在 <li> 上按 Enter 键

【问题标题】：Enter key press on <li> with Vue3使用 Vue3 在 <li> 上按 Enter 键
【发布时间】：2021-10-16 06:50:55
【问题描述】：

有这个代码：

<li v-for="(dog, index) in dogs" :key="index" class=" hover:bg-gray-50" :class="{ 'bg-red-50': index === focus }" @keyup.enter="goToSlug(dog)"> .... </li>

我完美地处理了焦点，但想在按下回车键时运行 goToSlug() 方法。它不会触发该方法。

【问题讨论】：

您需要 li 元素具有焦点，以便触发关键事件。您可以使用 vuejs refs 将焦点设置到该元素。

标签： vue.js vuejs3

【解决方案1】：

按键仅注册在具有焦点的项目上。

为了使像<li> 标签这样的元素具有焦点（它本身没有这种能力），您需要添加另一个名为tabindex='1' 的属性（1 在这里是任意值，但您可以阅读更多内容在那个here)。

所以在你的情况下：

<li 
  v-for="(dog, index) in dogs" 
  tabindex="1" 
  :key="index" 
  class=" hover:bg-gray-50" 
  :class="{ 'bg-red-50': index === focus }" 
  @keyup.enter="goToSlug(dog)"
> .... 
</li>

现在，为了在这个（或其兄弟）上注册一个按键，只需在它们之间切换，当你有所需的目标时按 Enter。

【讨论】：