Question

我正在尝试使用Vuetify作为我的API的前端。

我的API端点是simpleleads.test/api/v1/organisation-type，它返回以下响应：

{
  data: [{
      id: 3,
      name: "Accident Management",
      active: 1,
      created_at: "2018-07-17 09:44:41",
      updated_at: "2018-07-17 09:44:41"
    },
    {
      id: 1,
      name: "CMC",
      active: 1,
      created_at: "2018-07-17 09:44:41",
      updated_at: "2018-07-17 09:44:41"
    },
    {
      id: 6,
      name: "Garage",
      active: 1,
      created_at: "2018-07-17 11:44:41",
      updated_at: "2018-07-17 13:44:41"
    },
    {
      id: 5,
      name: "Insurance",
      active: 1,
      created_at: "2018-07-17 09:44:41",
      updated_at: "2018-07-17 09:44:41"
    },
    {
      id: 2,
      name: "Solicitors",
      active: 1,
      created_at: "2018-07-17 09:44:41",
      updated_at: "2018-07-17 09:44:41"
    },
    {
      id: 4,
      name: "Vehicle Repairs",
      active: 1,
      created_at: "2018-07-17 09:44:41",
      updated_at: "2018-07-17 09:44:41"
    }
  ],
  links: {
    first: "http://simpleleads.test/api/v1/organisation-type?page%5Bnumber%5D=1",
    last: "http://simpleleads.test/api/v1/organisation-type?page%5Bnumber%5D=1",
    prev: null,
    next: null
  },
  meta: {
    current_page: 1,
    from: 1,
    last_page: 1,
    path: "http://simpleleads.test/api/v1/organisation-type",
    per_page: 30,
    to: 6,
    total: 6
  }
}

我的Vuetify数据表组件是：

<template>
    <div>
        <v-data-table
            :headers="headers"
            :items="organisationTypes"
            :pagination.sync="pagination"
            :total-items="totalOrganisationTypes"
            :loading="loading"
            class="elevation-1"
        >
            <template slot="items" slot-scope="props">
                <td>{{ props.item.name }}</td>
                <td>{{ props.item.created_at }}</td>
                <td>{{ props.item.updated_at }}</td>
            </template>
        </v-data-table>
    </div>
</template>
<script>
    import OrganisationType from '../../models/OrganisationType'
    export default {
        data () {
            return {
                totalOrganisationTypes: 0,
                organisationTypes: [],
                loading: true,
                pagination: {},
                headers: [
                    {
                        text: 'Name',
                        align: 'left',
                        value: 'name'
                    },
                    { text: 'Created At', value: 'created_at' },
                    { text: 'Updated At', value: 'updated_at' }
                ]
            }
        },
        watch: {
            pagination: {
                handler () {
                    this.getDataFromApi()
                        .then(data => {
                            this.organisationTypes = data.items
                            this.totalOrganisationTypes = data.total
                        })
                },
                deep: true
            }
        },
        async mounted () {
            this.getDataFromApi()
                .then(data => {
                    this.organisationTypes = data.items
                    this.totalOrganisationTypes = data.total
                })
        },
        methods: {
            getDataFromApi () {
                this.loading = true
                return new Promise((resolve, reject) => {
                    const { sortBy, descending, page, rowsPerPage } = this.pagination

                    let items = this.getOrganisationTypes()
                    const total = items.length

                    if (this.pagination.sortBy) {
                        items = items.sort((a, b) => {
                            const sortA = a[sortBy]
                            const sortB = b[sortBy]

                            if (descending) {
                                if (sortA < sortB) return 1
                                if (sortA > sortB) return -1
                                return 0
                            } else {
                                if (sortA < sortB) return -1
                                if (sortA > sortB) return 1
                                return 0
                            }
                        })
                    }

                    if (rowsPerPage > 0) {
                        items = items.slice((page - 1) * rowsPerPage, page * rowsPerPage)
                    }

                    setTimeout(() => {
                        this.loading = false
                        resolve({
                            items,
                            total
                        })
                    }, 1000)
                })
            },
            getOrganisationTypes () {
                OrganisationType.get()
            }
        }
    }
</script>

表组件无法加载数据，尽管数据已返回到开发人员工具的XHR选项卡。另外，我在控制台中收到以下错误：

app.js：2658未捕获（承诺）TypeError：无法读取属性未定义的“长度”

该错误与以下行有关：

var total = items.length;

我使用https://github.com/robsontenorio/vue-api-query来管理我的查询，因为它可以与Laravel和相关的软件包一起很好地工作

import Model from './Model'
import Organisation from "./Organisation";

export default class OrganisationType extends Model {
    resource() {
        return 'organisation-type'
    }

    organisationTypes() {
        return this.hasMany(Organisation)
    }
}

有人可以帮忙吗？

Answer 1

您的方法getOrganisationTypes()没有return语句-因此它返回undefined，并且当您将此undefined存储在变量中时（{{1 }}），然后尝试访问其（不存在）属性items，则会收到此错误。因此，只需将您的length方法更改为：

getOrganisationTypes()

在调用方方法内：

async getOrganisationTypes() {
  return await OrganisationType.get();
}

无法获取未定义的长度-Vuetify DataTable

1 个答案: