V-数据表：将自定义属性绑定到插槽"items"

Question

我需要创建一个表，其中每一行代表一个项。在第一列中，我将使用v-autocomplete组件从对象列表中选择项目。由于v-autocomplete将被插入v-datatable的项模板中，所以我在将计算属性绑定到v-autocomplete的"v-bind:items"时遇到了问题。计算的属性在同一个文件中，但找不到它。

我尝试将计算属性绑定到模板，但没有结果。

<template>
<v-data-table
:headers="headers"
:items="desserts"
class="elevation-1"
>
<template slot="items" slot-scope="props">
<td>
<v-autocomplete
:items="saleables"
:item-text="i => i.name"
:item-value="i => i.id"
hide-details
></v-autocomplete>
</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>
</template>
</v-data-table>
<template>

[...]
computed: {
saleables: function () {
return this.$store.getters['saleables/items']
}
}
[...]

Answer 1

您应该用<v-app>标签包装您的模板，如下所示：

<template>
<v-app>
<v-data-table ...
...
</v-data-table>
</v-app>
<template>

如official docs:中所述

为了使应用程序正常工作，必须将其封装在v-app组件中。此组件是确定布局的网格断点所必需的。它可以存在于实体内的任何位置，但必须是所有Vuetify组件的父级。v-content需要是v-app的直接后代。