Как чередовать компоненты в цикле Vue JS?

Question

[Вадим]

Делаю простой пример, как тут, только на Vue. У объектов (товаров) в массиве есть свойство category. Массив рендерится в таблицу. В таблице идет сначала строка категории, а потом уже сами товары этой категории (данный массив уже отсортирован). Разметка компонента ProductTable выглядит так:

<template>
  <table>
    <thead>
    <tr>
      <th>Name</th>
      <th>Price</th>
    </tr>
    </thead>
    <tbody>
      <ProductRow
              v-for="product in filteredProducts"
              :key="product.id"
              :item="product"
      />
    </tbody>
  </table>
</template>

Как сделать, чтобы там, где нет предыдущего элемента (первая итерация цикла) и где категория предыдущего элемента была другой, вставлялся сначала еще компонент ProductCategoryRow и уже после ProductRow?

Answer 1

[Вадим]

Сделал, но возможно вариант не оптимальный:

<template>
  <table>
    <thead>
    <tr>
      <th>Name</th>
      <th>Price</th>
    </tr>
    </thead>
    <tbody>
      <template v-for="(product, index) in filteredProducts">
        <ProductCategoryRow
                v-if="index == 0 || product.category != filteredProducts[index - 1].category"
                :category="product.category"
        />
        <ProductRow
                :key="product.id"
                :item="product"
        />
      </template>
    </tbody>
  </table>
</template>