v-for loop display only unique items vue js

Question

Am trying to display icons based on the v-for and v-if conditions , but the icons are displayed multiple times , i need to display only the unique ones.

I tried v-if = 'index === 0' but instead this doesn't work

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

I want one thumb-up and one thumb-down to display if the condition matches instead multiple icons are displayed

I don't see anything obviously wrong with the code. Have you used vue-devtools to check the component's data values? — Stephen Thomas
– Stephen Thomas, Commented Apr 10, 2019 at 0:01
Can you please explain what "the icons are displayed multiple times" means? What sort of data is in inv.auction.Bits? — Phil
– Phil, Commented Apr 10, 2019 at 1:44

Phil · Accepted Answer · 2019-04-10 01:57:36Z

Sounds like you have multiple items in inv.auction.Bits that match d.userid but you only want to show one each of your icons if there are any matches.

I would, instead of looping inv.auction.Bits, create two computed properties to determine when to show your icons.

For example

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

and in your template (no 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>

References:

Array.prototype.some()

Collectives™ on Stack Overflow

v-for loop display only unique items vue js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related