时间戳

首页 > 解决方案 > v-for循环仅显示唯一项目vue js

html - v-for循环仅显示唯一项目vue js

问题描述

我试图根据 v-for 和 v-if 条件显示图标，但图标显示多次，我只需要显示唯一的图标。

我试过 v-if = 'index === 0' 但这不起作用

<div v-for="(bits, index) in inv.auction.Bits" :key="index">
  <div v-if="bits.iswin == true && bits.userid == d.userid">
    <b-tooltip label="mine" position="is-right">
      <b-icon class="iswinclass" icon="thumb-up" type="is-success"></b-icon>
    </b-tooltip>  
  </div>  
  <div v-if="bits.iswin == false && bits.userid == d.userid">
    <b-tooltip label="mine" position="is-right">
      <b-icon class="iswinclass" icon="thumb-down" type="is-danger"></b-icon>
    </b-tooltip>  
  </div> 
</div>

如果条件匹配，我希望显示一个拇指向上和一个拇指向下，而不是显示多个图标

标签： htmlvue.js

解决方案

听起来您在inv.auction.Bits那场比赛中有多个项目，d.userid但如果有任何匹配项，您只想显示一个图标。

我会inv.auction.Bits创建两个计算属性来确定何时显示图标，而不是循环。

例如

computed: {
  showThumbsUp() {
    return this.inv.auction.Bits.some(({ iswin, userid }) =>
        iswin && userid === this.d.userid)
  },
  showThumbsDown() {
    return this.inv.auction.Bits.some(({ iswin, userid }) =>
        !iswin && userid === this.d.userid)
  }
}

并在您的模板中（否v-for）

<div v-if="showThumbsUp">
  <b-tooltip label="mine" position="is-right">
    <b-icon class="iswinclass" icon="thumb-up" type="is-success"></b-icon>
  </b-tooltip>  
</div>  
<div v-if="showThumbsDown">
  <b-tooltip label="mine" position="is-right">
    <b-icon class="iswinclass" icon="thumb-down" type="is-danger"></b-icon>
  </b-tooltip>  
</div>

参考：

推荐阅读