使用Vuetify Table加载数据时出现‘item未定义’错误求助

问题场景 #

使用Vuetify的<v-table>组件时触发上述错误，但替换为原生<table>后代码正常运行，完整代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@3.5.3/dist/vuetify.min.css" />
  </head>
  <body>
    <script src="https://unpkg.com/vue@3.4.19/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@3.5.3/dist/vuetify.min.js"></script>
    
    <div id="app">
          <v-table>
            <tbody>
              <tr v-for="item in routes">
                <td>{{item.customerName}}</td>
              </tr>
            </tbody>
          </v-table>
    </div>

    <script>
      const { createApp, ref } = Vue;
      const { createVuetify } = Vuetify
      const vuetify = createVuetify()

      const app = createApp({
        data: () => ({
          routes: [{"id":1,"customerName":"Pietje puk", "orderNumber":"PF-123456789", "zipcode":"5388AA,18"},
                   {"id":2,"customerName":"van de Graaf", "orderNumber":"TEST", "zipcode":"1234AA"}]
        }),
        setup() {
          const date = ref();
        }
      });

      app.use(vuetify).mount('#app')
    </script>
  </body>
</html>

问题原因 #

Vuetify的<v-table>是封装组件，有自己的插槽逻辑，不能直接像原生<table>那样在<tbody>内写v-for。组件内部会默认尝试读取item变量，但这个变量是你在自定义v-for中定义的，组件作用域无法访问，因此抛出错误。

解决方法 #

使用Vuetify表格提供的官方插槽语法来渲染数据：

方式1：自定义列内容 #

通过item.字段名插槽单独定义每一列的渲染：

<div id="app">
  <v-table :items="routes">
    <!-- 自定义customerName列 -->
    <template v-slot:item.customerName="{ item }">
      {{ item.customerName }}
    </template>
    <!-- 可继续添加其他列的插槽 -->
    <template v-slot:item.orderNumber="{ item }">
      {{ item.orderNumber }}
    </template>
  </v-table>
</div>

方式2：自定义整行 #

通过item插槽自定义整行结构：

<div id="app">
  <v-table :items="routes">
    <template v-slot:item="{ item }">
      <tr>
        <td>{{ item.customerName }}</td>
        <td>{{ item.orderNumber }}</td>
        <td>{{ item.zipcode }}</td>
      </tr>
    </template>
  </v-table>
</div>

额外优化 #

你的setup函数中定义了date但未返回，若后续需要使用该变量，需补充返回：

setup() {
  const date = ref();
  return { date };
}

内容的提问来源于stack exchange，提问作者Ferry van de Graaf