Nuxt3+Vuetify3：如何为v-list items绑定@click与navigateTo事件

要在Vuetify3的v-list :items简写模式下绑定Nuxt3的navigateTo跳转，你需要调整事件绑定的格式，同时避免函数立即执行导致的无限循环：

核心问题说明 #

1. @click不生效：Vue在对象式props中不识别@click作为键名，事件绑定需使用on前缀的驼峰格式（如onClick），或嵌套在on对象内。
2. 无限循环原因：直接写navigateTo('./dashboard')会在组件初始化时立即执行函数，触发页面跳转后组件重新渲染，进而重复执行跳转逻辑，形成循环。必须用箭头函数包裹，延迟函数执行时机到点击触发时。

修正后的完整代码 #

<template>
  <v-navigation-drawer
    v-model="menu"
    class="pa-4"
    temporary
  >
    <v-list
      :items="items"
      nav
      density="compact"
    />
  </v-navigation-drawer>
</template>
<script setup lang="ts">
const menu = ref(false);
const items = [
  {
    title: 'Dashboard',
    props: {
      // 使用 onClick 绑定点击事件，箭头函数避免立即执行
      onClick: () => {
        navigateTo('./dashboard');
      },
      prependIcon: 'mdi-view-dashboard-variant-outline'
    }
  },
  {
    title: 'Orders',
    props: {
      onClick: () => {
        navigateTo('./orders');
      },
      prependIcon: 'mdi-package-variant'
    }
  }
];
</script>

备选写法（使用on对象） #

如果偏好更清晰的事件分组，也可以将点击事件嵌套在on对象中：

{
  title: 'Dashboard',
  props: {
    on: {
      click: () => navigateTo('./dashboard')
    },
    prependIcon: 'mdi-view-dashboard-variant-outline'
  }
}

这种写法既保留了v-list :items的简写优势，又通过navigateTo实现了无Bug的页面跳转。

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