How to loop only once the duplicate data by using v-for?

Question

I am receiving the data from the cloud. I have looked at many questions in StackOverflow, but all of them were using the data in data(). I am a super beginner in using Vue.js, so could not apply it in my code.

I would like to display the duplicate data only once in v-for. In this case, {{item.matched_product.name}} displays repeatedly.

<template slot-scope="scope">
  <div v-if="scope.row.external_store.service_name == 'sellorder'">
    <div
      v-for="item in scope.row.items"
      :key="item.id"
      class="option-detail"
      ref="option_variant"
    >
      <div v-if="item.matched_product">

        <-- This is the part I want to display only once --> 
        <span style="font-weight:bold">
           <i class="el-icon-caret-right"></i>
          {{item.matched_product.name}}
        </span>

        <span>
          <span
            v-if="item.matched_variant">
            {{item.matched_variant.options.map(obj => obj.value).join(' / ')}} {{item.qty}} / {{item.matched_variant.properties && item.matched_variant.properties.soldout ?
            '(sold out)':''}}
          </span>
          <span v-else>No matching</span>&nbsp;
          <el-button size="mini" round @click="matchProduct(scope.row,item)">Edit matching</el-button>
        </span>
      </div>
      <div v-else>
        <el-button size="mini" @click="matchProduct(scope.row,item)">Match</el-button>
      </div>
    </div>
  </div>
</template>

What should I do?

Answer 1

I added below like @JoshBonnick mentinoed

v-for="(item, index) in scope.row.items"

and I put this code as well.

{{ ((index == 0) || item.matched_product.name != scope.row.items[index-1].matched_product.name) ? item.matched_product.name : '' }} 

Now, this works fine.

Answer 2

You can access the index in your for loop by doing the following

v-for="(item, index) in scope.row.items"

Then you can just add a v-if to the element you want to only display once to check if index is 0