javascript - Enter key press on <li> with Vue3 - Stack Overflow

admin管理员组

文章数量:1326061

Have this code:

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

I handle the focus perfectly, but want to run the method goToSlug() on key enter be pressed. It doesn't fire the method.

Have this code:

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

I handle the focus perfectly, but want to run the method goToSlug() on key enter be pressed. It doesn't fire the method.

• javascript
• vue.js
• vuejs3

Share Improve this question Follow edited Jun 1, 2022 at 17:09 Riza Khan 3,15855 gold badges2828 silver badges6363 bronze badges asked Aug 12, 2021 at 23:38 Louis BLouis B 30611 gold badge66 silver badges2020 bronze badges 1

• You need the li element to have focus, for key events to fire. You can use vuejs refs to set focus to that element. – Bergur Commented Aug 13, 2021 at 0:03

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Key presses are only registered on items that have focus.

In order to make an element like a <li> tag focusable (which natively does not have that ability) you will need to add another attribute called tabindex='1' (1 being an arbitrary value here, but you can read more up on that here).

So in your case:

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

Now, in order to register a key press on this (or its siblings) just tab through them and press enter when you have the desired target.

本文标签： javascriptEnter key press on ltligt with Vue3Stack Overflow