Как создать значок и значок Vuetity, используя createElement в функции рендера

Question

В моем приложении Vue я использую v-data-table, а значения столбцов отображаются с помощью функции рендеринга внутри функционального компонента, например так:

render(createElement) {
    if (this.$props.format) {
      return this.$props.format(this.item, this.index, createElement);
    }
    return createElement('div', this.getText());
  },

, а затем в моем format Функция (которая является частью объекта в отдельном файле), вы можете использовать createElement, чтобы создать элемент hTML и вернуть его. Вот пример из другой части приложения:

format: (template, index, createElement) => {
    const captureType = template.captureType === 'passphrase' ? 'voice' : template.captureType;
    return createElement('div', captureType);
  },

Итак, я пытаюсь сделать что-то довольно сложное, например значок Vuetify со значком. Вот код из Vuetify docs .

<v-badge left>
  <template v-slot:badge>
    <span>6</span>
  </template>
  <v-icon
    large
    color="grey lighten-1"
  >
    shopping_cart
  </v-icon>
</v-badge>

В качестве отправной точки я могу создать базовый c значок HTML очень хорошо

    format: (item, index, createElement) => {
      const propsObj = {
        attrs: {
          color: 'blue',
        },
        props: {
          overlap: true,
          left: true,
        },
        slots: {
          badge: 'dummy',
        },
      };
      return createElement('v-badge', propsObj, [createElement('v-icon', { attrs: { color: 'success', large: true } }, 'account_circle')]);
    },

Это приводит меня почти к тому, что показывает мой значок, и он обернут элементом badge, хотя содержимое значка не отображается:

<span class="v-badge v-badge--left v-badge--overlap">
  <i aria ....>account_circle></a>
</span>

Моя проблема заключается в получении значения дисплея для badge слот. Чего мне не хватает для этого?

Answer 1

С помощью приятеля у меня все заработало. Вот окончательный код:

format: (item, index, createElement) => {
      const propsObj = {
        props: {
          overlap: true,
          left: true,
          color: 'success',
        },
      };
      const icon = createElement('v-icon', { props: { color: 'success', large: true } }, 'account_circle');
      const span = createElement('span', { slot: 'badge' }, '5');
      return createElement('v-badge', propsObj, [span, icon]);
    },

Идея состоит в том, что я разбиваю его на более мелкие куски, которые имитируют c структуру, которую я пытаюсь создать. В данном случае это просто v-badge, который содержит двух дочерних элементов: слот badge и элемент v-icon. Я передаю соответствующие параметры конфигурации каждому дочернему элементу, а затем передаю два визуализированных элемента в createElement для родительского элемента v-badge.