v-data-table：将自定义属性绑定到“项目”插槽

Question

我需要创建一个表格，其中每一行代表一个项目。在第一列中，我将使用v-autocomplete组件从对象列表中选择项目。由于v-autocomplete将被插入v-data-table的项目模板中，因此在将计算属性绑定到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的直接后代。