Vuetify 的数据 table + Vue Typed missing props value

Question

原谅初学者的无知。我正在尝试渲染 Vuetify 的数据 table，并将数据填充到打字稿文件中，如下所示。在模拟示例文档 here 中提供的内容时，我遇到了以下错误

vue.runtime.esm.js?a427:475 [Vue warn]: Property or method "props" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

data.vue

<template>
    <v-content>
        <v-data-table
        v-bind:headers="headers"
        :items="items"
        class="elevation-1"
        hide-actions
        dark
      >
      <template slot="items" slot-scope="props">
        <td>{{ props.item.name }}</td>
        <td class="text-xs-right">{{ props.item.calories }}</td>
        <td class="text-xs-right">{{ props.item.fat }}</td>
        <td class="text-xs-right">{{ props.item.carbs }}</td>
        <td class="text-xs-right">{{ props.item.protein }}</td>
        <td class="text-xs-right">{{ props.item.sodium }}</td>
        <td class="text-xs-right">{{ props.item.calcium }}</td>
        <td class="text-xs-right">{{ props.item.iron }}</td>
      </template>
        </v-data-table>
    </v-content>
</template>

TS文件

import Vue from "vue";
import { Component } from "vue-property-decorator";
let template = require("./data.vue");

@Component({
    mixins: [template],
})
export default class Inventory extends Vue {
    get tmp() {
        return "";
    }
    get search() { return ""; }
    get pagination() { return {}; }
    get headers() {
        return [
            {
                text: "Dessert (100g serving)",
                align: "left",
                sortable: false,
                value: "name"
            },
            { text: "Calories", value: "calories" },
            { text: "Fat (g)", value: "fat" },
            { text: "Carbs (g)", value: "carbs" },
            { text: "Protein (g)", value: "protein" },
            { text: "Sodium (mg)", value: "sodium" },
            { text: "Calcium (%)", value: "calcium" },
            { text: "Iron (%)", value: "iron" }
        ];
    }
    get items() {
        return [
            {
                value: false,
                name: "Frozen Yogurt",
                calories: 159,
                fat: 6.0,
                carbs: 24,
                protein: 4.0,
                sodium: 87,
                calcium: "14%",
                iron: "1%"
            },
            {
                value: false,
                name: "Ice cream sandwich",
                calories: 237,
                fat: 9.0,
                carbs: 37,
                protein: 4.3,
                sodium: 129,
                calcium: "8%",
                iron: "1%"
            }
        ];
    }
}

使用的包

Vue ^2.5.0
验证 0.1.7
打字稿
vue-属性-decorator（尝试使用类似的包 vue-typed）

是否缺少连接数据的内容？

Answer 1

我发现了为什么您的组件无法满足要求。通过的 mixin 不是正确的。应该是template.default

declare function require(file:string):any
const template = require('./template.vue');
import Vue from "vue";
import { Component }  from "vue-property-decorator";
@Component({
    mixins: [template.default]
})
....

Answer 2

不确定，如果我有运行到一个现有的错误，但是在将我的 vuetify 升级到 1.0.0 + 我没有遇到这个错误

Vuetify 的数据 table + Vue Typed missing props value

Vuetify's data table + Vue Typed missing props value

typescript2.0

vuejs2

vuetify.js