javascript - v-数据表 : bind a custom property to "items" slot

Question

我需要创建一个表，其中每一行代表一个项目。在第一列中，我将使用 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']
  }
}
[...]

Answer 1

你应该用 <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.