我需要创建一个表,其中每一行代表一个项目。在第一列中,我将使用 v-autocomplete 组件从对象列表中选择项目。由于 v-autocomplete 将被插入到 v-data-table 的项目模板中,我在将计算属性绑定(bind)到 v-autocomplete 的“v-bind:items”时遇到了问题。计算属性在同一个文件中,但找不到。
我尝试将计算属性绑定(bind)到模板,但没有结果。
<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']
}
}
[...]
最佳答案
你应该用 <v-app>
包装你的模板标记如下:
<template>
<v-app>
<v-data-table ...
...
</v-data-table>
</v-app>
<template>
如 official docs
中所述:
In order for your application to work properly, you must wrap it in a v-app component. This component is required for determining grid breakpoints for the layout. This can exist anywhere inside the body, but must be the parent of ALL Vuetify components. v-content needs to be a direct descendant of v-app.
关于javascript - v-数据表 : bind a custom property to "items" slot,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54504877/