vue.js - 渲染中的Vuetify v-data-table错误：“TypeError：

问题描述

我正在尝试将 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.jsvuejs2graphqlvuetify.jsapollo

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

问题描述

解决方案

推荐阅读