v-data-table vuetify не могу разместить иконки

Question

Не могу понять как добавить слева колонку со своими иконками. Примерно понимаю что нужен v-slot и template, но не получается

<template>
  <div>
    <v-data-table
      :headers="headers"
      :items="infoExchanges"
      :items-per-page="5"
      class="elevation-1"
    >
      <template #item.logo="{value}">
        <img :src="value" />
      </template>
    </v-data-table>
  </div>
</template>

В дате лежит

  headers: [
    { text: 'Name', value: 'Name' },
    { text: 'Country', value: 'Country' },
    {
      text: 'logo',
      value:
        'https://telecomdom.com/wp-content/uploads/2020/01/perevodchik-s-russkogo-na-anglijskij.jpg',
    },
    { text: 'GradePoints (%)', value: 'GradePoints' },
  ],

Сниппет минимального примера:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      infoExchanges: [],
      headers: [
        {
          text: 'logo',
          value: 'https://telecomdom.com/wp-content/uploads/2020/01/perevodchik-s-russkogo-na-anglijskij.jpg',
        },
        { text: 'Name', value: 'Name' },
        { text: 'Country', value: 'Country' },
        { text: 'GradePoints (%)', value: 'GradePoints' },
      ],
    };
  },
  methods: {
    async getApiInfoExchanges() {
      try {
        const response = await fetch(
          'https://min-api.cryptocompare.com/data/exchanges/general'
        );
        const result = await response.json();
        const resultKey = Object.keys(result.Data);

        for (let i = 0; i < resultKey.length; i++) {
          this.infoExchanges.push(result.Data[resultKey[i]]);
        }
      } catch (error) {
        console.error(error);
      }
    },
  },
  created() {
    this.getApiInfoExchanges();
  },
});

<div id="app">
  <v-app>
    <v-main>
      <div>
        <h1 class="titleText mb-6 mt-4 text-center">Информация по биржам</h1>
        <v-data-table
          :headers="headers"
          :items="infoExchanges"
          :items-per-page="5"
          class="elevation-1"
        >
          <template #item.logo="{value}">
            <img :src="value" />
          </template>
        </v-data-table>
      </div>
    </v-main>
  </v-app>
</div>

<script src="https://unpkg.com/vue@2/dist/vue.min.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify/dist/vuetify.min.css">

Answer 1

Имя слота Vuetify генерирует исходя из значения value заголовка (которое соответствует имени свойства каждого объекта в данных).
То есть, получается что слот item.logo отсутствует просто потому что в конфигурации заголовков нет объекта с value: 'logo'.

Когда нужно одинаковое изображение для всех строк таблицы, можно просто указать такое значение value, и захардкодить изображение в шаблоне (отсутствие свойства logo в объектах данных из items, в таком случае - не играет роли, т.к. содержимое слота статично, свойство не используется):

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      infoExchanges: [],
      headers: [
        { text: 'logo', value: 'logo' },
        { text: 'Name', value: 'Name' },
        { text: 'Country', value: 'Country' },
        { text: 'GradePoints (%)', value: 'GradePoints' },
      ],
    };
  },
  methods: {
    async getApiInfoExchanges() {
      try {
        const response = await fetch(
          'https://min-api.cryptocompare.com/data/exchanges/general'
        );
        const result = await response.json();
        const resultKey = Object.keys(result.Data);

        for (let i = 0; i < resultKey.length; i++) {
          this.infoExchanges.push(result.Data[resultKey[i]]);
        }
      } catch (error) {
        console.error(error);
      }
    },
  },
  created() {
    this.getApiInfoExchanges();
  },
});

.logo { height: 2.5em; }

<div id="app">
  <v-app>
    <v-main>
      <div>
        <h1 class="titleText mb-6 mt-4 text-center">Информация по биржам</h1>
        <v-data-table
          :headers="headers"
          :items="infoExchanges"
          :items-per-page="5"
          class="elevation-1"
        >
          <template #item.logo>
            <img class="logo" src="https://telecomdom.com/wp-content/uploads/2020/01/perevodchik-s-russkogo-na-anglijskij.jpg">
          </template>
        </v-data-table>
      </div>
    </v-main>
  </v-app>
</div>

<script src="https://unpkg.com/vue@2/dist/vue.min.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify/dist/vuetify.min.css">

Если же хочется показывать разные изображения для разных строк таблицы, то надо менять данные (infoExchanges, в данном случае) - а именно, добавлять в объекты данных свойство logo со значением содержащим ссылку на изображение.
Когда в объектах данных будет такое свойство со ссылкой, подобная разметка в шаблоне будет работать:

<template #item.logo="{ value }">
  <img :src="value">
</template>

БЛОГ НА HUSL

v-data-table vuetify не могу разместить иконки

Ответы (1 шт):