如何使用v-for仅循环一次重复数据？

Question

我正在从云中接收数据。我看过StackOverflow中的许多问题，但所有问题都使用了data()中的数据。我是使用Vue.js的超级初学者，因此无法在我的代码中应用它。

我只想在v-for中显示一次重复数据。在这种情况下，{{item.matched_product.name}}会重复显示。

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

我该怎么办？

Answer 1

您可以通过以下操作访问index中的for loop

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

然后，您可以将v-if添加到您想要仅显示一次以检查if index为0的元素上

Answer 2

我在下面添加了@JoshBonnick mentinoed

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

我也输入了这段代码。

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

现在，这很好。