How to alternate components in a Vue JS loop?

Question

Vue.js

I'm doing a simple example, like here , only on Vue. The objects (products) in the array have a category property. The array is rendered into a table. In the table, the category line goes first, and then the products of this category themselves (this array is already sorted). The markup for the ProductTable component looks like this:

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

How to make sure that where there is no previous element (the first iteration of the loop) and where the category of the previous element was different, the ProductCategoryRow component is inserted first and after the ProductRow?

Answer 1

I did, but it may not be the best option:

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