How to hide my badge if the value of the counter is 0?

Question

Here is the html code, containing the badge and the condition to display the badge

<v-tab ripple>
  <v-badge color="red">
    <template v-slot:badge v-if="invoiceCounter > 0 && hasEditAccess === true"> 
      <span>{{ invoiceCounter }}</span>
    </template>
    Invoicing
  </v-badge>
</v-tab>
    
data() {
  return {
    hasEditAccess: false,
    invoiceCounter: 0,              
  };
},

Answer 1

This hasn't received much activity since posted but I ran into this problem today and figured it out. According to the documentation for the v-badge (https://vuetifyjs.com/en/api/v-badge/#props-value) the value property can be used for this. The v-badge value prop "Controls whether the component is visible or hidden". So you would do something like this:

<v-tab ripple>
  <v-badge color="red" :value="invoiceCounter > 0 && hasEditAccess === true">
    <template v-slot:badge> 
      <span>{{ invoiceCounter }}</span>
    </template>
    Invoicing
  </v-badge>
</v-tab>

Answer 2

Looks like the documentation has been updated, and now the property for that is model-value.

This works for me without using slots:

<v-badge :content="itemsCount" :model-value="itemsCount > 0" color="orange-lighten-2">
    <v-btn>
        Cart
    </v-btn>
</v-badge>

In my case:

• content shows how many items were added to a cart
• model-value will show the badge only when there are items added
• the badge is shown at the top right corner of my Cart button