CODEWITHSUNDEEP
vue.js
Mike K
Mike K

Reputation: 6481

Conditionally rendering icons only one time depending on property

I am trying to write a template that displays either Icon AAA or Icon BBB, depending on whether or not the item in the current iteration has a specific flag. Here is my code:

<div v-for="(item, itemIndex) in items">
    <div v-if="item.hasUnreadComments">
        <span>Display Icon AAA</span>
    </div>
    <div v-else>
        <span>Display Icon BBB</span>
    </div>
</div>

The issue here is that I need either icon displayed ONCE. If more than one item has it set to item.hasUnreadComments === true, Icon AAA will be displayed equally as many times, which is not what I want. Couldnt find anything in the docs and I dont want to bind it to a v-model.

Can this be done in Vue without a third data variable used as a flag?

Upvotes: 2

Views: 1360

Answers (1)

zero298
zero298

Reputation: 26867

You will have to do some sort of intermediate transformation. v-if is just a flexible, low-level directive that will hide or show an element based on a condition. It won't be able to deal directly with how you expect the data to come out.

If I'm understanding what you're asking for, you want an icon to only be visible once ever in a list. You can prefilter and use an extra "else" condition. This sounds like a use case for computed properties. You define a function that can provide a transformed version of data when you need it.

This example could be improved upon by finding a way to boil down the nested if/elses but I think this covers your use case right now:

const app = new Vue({
  el: "#app",
  data() {
    return {
      items: [{
          hasUnreadComments: true
        },
        {
          hasUnreadComments: true
        },
        {
          hasUnreadComments: false
        },
        {
          hasUnreadComments: true
        },
        {
          hasUnreadComments: false
        },
      ]
    }
  },
  computed: {
    filteredItems() {
      let firstIconSeen = false;
      let secondIconSeen = false;
      return this.items.map(item => {
        if (item.hasUnreadComments) {
          if (!firstIconSeen) {
            item.firstA = true;
            firstIconSeen = true;
          }
        } else {
          if (!secondIconSeen) {
            item.firstB = true;
            secondIconSeen = true;
          }
          secondIconSeen = true;
        }
        return item;
      });
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-for="(item, itemIndex) in filteredItems">
    <div v-if="item.firstA">
      <span>Display Icon AAA</span>
    </div>
    <div v-else-if="item.firstB">
      <span>Display Icon BBB</span>
    </div>
    <div v-else>
      <span>Display no icon</span>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions