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

【问题标题】：Vuetify v-data-table Error in render: "TypeError: _a is undefined"渲染中的Vuetify v-data-table错误：“TypeError：_a未定义”
【发布时间】：2021-05-12 12:26:44
【问题描述】：

我正在尝试将 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",
        "description": "yoooo",
        "relatedCustomer": {
          "customerName": "Joe"
        },
        "serviceTechnician": {
          "username": "user1"
        }
      },
      {
        "id": "3",
        "description": "yoooo",
        "relatedCustomer": {
          "customerName": "Joe"
        },
        "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",
                "description": "yoooo",
                "relatedCustomer": {
                    "customerName": "Joe",
                    "__typename": "CustomerType"
                },
                "serviceTechnician": {
                    "username": "joe",
                    "__typename": "UserNode"
                },
                "__typename": "WorkOrderType"
            },
            {
                "id": "2",
                "description": "yoooo",
                "relatedCustomer": {
                    "customerName": "Joe",
                    "__typename": "CustomerType"
                },
                "serviceTechnician": {
                    "username": "user1",
                    "__typename": "UserNode"
                },
                "__typename": "WorkOrderType"
            },
            {
                "id": "3",
                "description": "yoooo",
                "relatedCustomer": {
                    "customerName": "Joe",
                    "__typename": "CustomerType"
                },
                "serviceTechnician": {
                    "username": "user1",
                    "__typename": "UserNode"
                },
                "__typename": "WorkOrderType"
            }
        ]
    }
}

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

我是 Vuetify/Vue 的新手，所以我非常感谢这里提供一些关于如何处理我的标头的指示，以及出了什么问题或 TypeError _a 的含义。

感谢您的任何意见。

【问题讨论】：

标签： vue.js vuejs2 graphql vuetify.js apollo

【解决方案1】：

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

查了一下，发现this StackOverflow post展示了如何正确初始化Vuetify。

在我的例子中，我需要在我的 Vue 实例中添加 vuetify: new Vuetify()。

【讨论】：