使用 Vue3 在 <li> 上输入按键

Question

有这个代码：

<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>

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

Answer 1

按键仅记录在具有焦点的项目上。

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

所以在你的情况下：

<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>

现在，为了在这个（或其同级）上注册按键，只需按 Tab 键浏览它们，然后在找到所需目标时按 Enter 键。