渲染中的 Vuetify v-data-table 错误：“TypeError：_a 未定义”

如何解决渲染中的 Vuetify v-data-table 错误：“TypeError：_a 未定义”

我正在尝试将 v-data-table 绑定到我从 graphene-django graphQL 返回的 WorkOrders 查询。

在我的App.vue

<template>
  <div id="app">
    <div class="home">
    <v-data-table
    :headers="headers"
    :items="workorders">
    </v-data-table>
    </div>
  </div>
</template>

<script>
import gql from 'graphql-tag'

const WorkOrderQuery = gql`
 query c {
  workorders {
   id,description,relatedCustomer {
    customerName
   }
   serviceTechnician {
    username
   }
  }
 }
`;

export default {
  data() {
    return {
      headers: [
        {
          text: 'Customer',align: 'start',sortable: true,value: 'relatedCustomer.customerName'
        }
      ],workorders: [],}
  },apollo: {
    workorders: WorkOrderQuery,},}
</script>

我可以确认查询（当使用 GraphiQL/postman/insomnia 查询时）返回一个有效的字典列表。来自上述查询的示例响应：

{
  "data": {
    "workorders": [
      {
        "id": "1","description": "yoooo","relatedCustomer": {
          "customerName": "Joe"
        },"serviceTechnician": {
          "username": "joe"
        }
      },{
        "id": "2","serviceTechnician": {
          "username": "user1"
        }
      },{
        "id": "3","serviceTechnician": {
          "username": "user1"
        }
      }
    ]
  }
}

我在开发者工具中遇到的错误是

[Vue warn]: Error in render: "TypeError: _a is undefined"

found in

---> <VData>
       <VDataTable>
         <App> at src/App.vue
           <Root>

但我可以确认 /graphql/ 上的查询正在返回有效响应：

{
    "data": {
        "workorders": [
            {
                "id": "1","relatedCustomer": {
                    "customerName": "Joe","__typename": "CustomerType"
                },"serviceTechnician": {
                    "username": "joe","__typename": "UserNode"
                },"__typename": "WorkOrderType"
            },{
                "id": "2","serviceTechnician": {
                    "username": "user1",{
                "id": "3","__typename": "WorkOrderType"
            }
        ]
    }
}

并且使用 Vue 开发者工具扩展，还可以验证 workorders 数组是否正确设置为上述查询返回的三个对象。

我是 Vuetify/Vue 的新手，所以我真的很感激这里有一些关于如何处理我的标头的指示，以及出了什么问题或 TypeError _a 意味着什么。

感谢您的所有意见。

解决方法

这似乎是一个配置错误，在将所有内容都包装在 <v-app> 之后，我收到一个错误消息，告诉我 Vuetify 没有正确初始化。

查找后，我发现 this StackOverflow post 显示了如何正确初始化 Vuetify。

就我而言，我需要在我的 Vue 实例化中添加 vuetify: new Vuetify()。