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

Posted 2023-03-08

【中文标题】渲染中的Vuetify v-data-table错误：“TypeError：_a未定义”

【英文标题】：Vuetify v-data-table Error in render: "TypeError: _a is undefined"

【发布时间】：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 的含义。

感谢您的任何意见。

【参考方案1】：

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

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

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