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

Question

我正在从云端接收数据。我在 Whosebug 中查看了很多问题，但它们都使用了 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

您可以通过执行以下操作在 for loop 中访问 index

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 : '' }}

现在，这工作正常。

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

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

vue.js

v-for