Question

赦免初学者的无知。我试图渲染Vuetify的数据表，其数据填充在打字稿文件中，如下所示。在模拟示例文档here中提供的内容后，我遇到以下错误

vue.runtime.esm.js？a427：475 [Vue警告]：财产或方法＆＃34;道具＆＃34;是未在实例上定义，但在呈现期间引用。确保在数据选项中声明反应数据属性。

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
Vuetify 0.1.7
打字稿
vue-property-decorator（尝试使用类似包的vue-typed）

有什么东西可以用来连接数据吗？

Answer 1

我发现为什么你的组件没有使用require。 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的数据表+ Vue Typed缺少道具值

2 个答案: