Vuetify 的数据表 + Vue Typed 缺少 props 值 [英] Vuetify's data table + Vue Typed missing props value
问题描述
请原谅初学者的无知.我正在尝试使用填充在打字稿文件中的数据来呈现 Vuetify 的数据表，如下所示.在模拟示例文档 此处 中提供的内容后，我遇到以下错误><块引用>
vue.runtime.esm.js?a427:475 [Vue 警告]:属性或方法props"是未在实例上定义但在渲染期间引用.确保在 data 选项中声明响应式数据属性.
data.vue
<v-内容><v-数据表v-bind:headers="headers":项目=项目"类=海拔-1"隐藏动作黑暗的><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></v-data-table></v-content>Ts 文件
从vue"导入Vue；从vue-property-decorator"导入{组件}；let template = require("./data.vue");@成分({混合:[模板]，})导出默认类库存扩展 Vue {获取 tmp() {返回 "";}获取搜索(){ 返回"；}获取分页(){返回{}；}获取标题(){返回 [{文字:甜点(100 克份)"，对齐:左"，可排序:假，值:名称"},{ 文字:卡路里"，值:卡路里"}，{ text: "Fat (g)", value: "fat" },{ text: "Carbs (g)", value: "carbs" },{ 文本:蛋白质(g)"，值:蛋白质"}，{文字:钠(mg)"，值:钠"}，{ 文字:钙(%)"，值:钙"}，{ 文字:铁(%)"，值:铁"}];}获取项目(){返回 [{值:假，名称:冷冻酸奶"，卡路里:159，脂肪:6.0，碳水化合物:24，蛋白质:4.0，钠:87，钙:14%"，铁:1%"},{值:假，名称:冰淇淋三明治"，卡路里:237，脂肪:9.0，碳水化合物:37，蛋白质:4.3，钠:129，钙:8%"，铁:1%"}];}}使用的包
- Vue ^2.5.0
- Vuetify 0.1.7
- 打字稿
- vue-property-decorator(尝试使用类似包的 vue-typed)
是否缺少连接数据的内容?
不确定，如果我遇到了现有的错误，但在将我的 vuetify 升级到 1.0.0 + 我没有遇到这个错误
Pardon beginner's ignorance. Am trying to render Vuetify's data table with data being populated in a typescript file as seen below. Upon emulating what is provided in the sample doc here, I encounter the following error
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 file
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%"
}
];
}
}
Packages used
- Vue ^2.5.0
- Vuetify 0.1.7
- Typescript
- vue-property-decorator (tried with vue-typed which is a similar package)
Is there something that am missing to wire up the data?
Not sure, if I had run into an existing bug, but upon upgrading my vuetify to 1.0.0 + i did not encounter this error
这篇关于Vuetify 的数据表 + Vue Typed 缺少 props 值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
