v-data-table: привязать пользовательское свойство к слоту "items"

Question

Мне нужно создать таблицу, где каждая строка представляет элемент.В первом столбце я собираюсь использовать компонент v-autocomplete для выбора элемента из списка объектов.Поскольку v-autocomplete будет вставлено в шаблон элемента v-data-table, у меня возникли проблемы с привязкой вычисляемого свойства к "v-bind: items" из v-autocomplete.Свойство computed находится в том же файле, но не может быть найдено.

Я попытался связать свойство computed с шаблоном без результата.

<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.