如何为Vue v-for渲染列表的最后一项绑定键盘事件实现菜单导航

核心逻辑 #

Vue 中通过 v-for 渲染列表时，本身就会提供遍历索引、列表长度的上下文，判断当前项是否为最后一项完全不需要额外封装，直接通过内联对比索引和数组长度即可实现，完全符合 Vue 的开发范式。

代码调整步骤 #

1. 修正事件绑定时机：之前写的@keyup.tab.exact触发时机偏晚，TAB 键的默认焦点跳转行为在keydown阶段就会生效，如果在keyup阶段才触发菜单关闭，会出现焦点已经跳转、菜单才延迟关闭的错位问题，需要把最后一项的 TAB 事件绑定到keydown阶段。
2. 动态判断最后一项：通过index === 当前遍历数组长度 - 1的判断，仅给匹配的项绑定目标事件，不用硬编码固定索引值，后续列表数量变化也不需要修改逻辑。
   调整后的完整代码如下：

<li
  v-for="(item, index) in menuItems[0]"
  :key="index"
  tabindex="-1"
  @keydown.shift.tab="closeSubMenu"
  @keyup.enter.exact="closeSubMenu"
  :keydown.tab.exact="index === menuItems[0].length - 1 ? closeSubMenu : null"
>
  <nuxt-link :to="item.url" />
</li>

可优化的维护性写法 #

如果后续菜单结构变复杂，每次写menuItems[0]的取值逻辑冗余度太高，可以把子菜单的取值抽成计算属性，减少重复路径判断：

computed: {
  // 取当前激活的子菜单数据
  activeSubMenu() {
    return this.menuItems[0] || []
  }
}

模板里对应的写法就可以简化为：

<li
  v-for="(item, index) in activeSubMenu"
  :key="index"
  tabindex="-1"
  @keydown.shift.tab="closeSubMenu"
  @keyup.enter.exact="closeSubMenu"
  :keydown.tab.exact="index === activeSubMenu.length - 1 ? closeSubMenu : null"
>
  <nuxt-link :to="item.url" />
</li>

注意事项 #

• 因为内部的nuxt-link最终渲染为可聚焦的 a 标签，绑定在父级 li 上的键盘事件可以通过冒泡机制捕获到 a 标签上触发的键盘动作，不需要额外把事件绑定移到链接元素上。
• 不要硬编码类似index === 1的判断，哪怕当前列表只有2个条目，后续新增、删除菜单项时硬编码的判断会直接失效，用通用的长度对比逻辑兼容性更好。
• 触发closeSubMenu时不需要主动阻止 TAB 键的默认行为，保留浏览器原生的焦点跳转逻辑，就能实现焦点顺畅移到下一个导航模块的效果。

内容的提问来源于stack exchange，提问作者Miguel