Question

我试图基于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>

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

Answer 1

听起来像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>

参考文献：

Array.prototype.some()

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

1 个答案: