javascript - How to hide my badge if the value of the counter is 0? - Stack Overflow

admin管理员组

文章数量:1357307

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,              
  };
},

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,              
  };
},

• javascript
• vue.js

Share Improve this question Follow edited Sep 23, 2020 at 12:28 Martijn 16.1k44 gold badges3838 silver badges7272 bronze badges asked Sep 23, 2020 at 12:26 Karim HuseinKarim Husein 4111 silver badge33 bronze badges 3

• Are you using twig for template rendering? – Keutelvocht Commented Sep 23, 2020 at 12:35
• If i am getting your question right. You can simply use a v-if What is your goal ? What are trying to do ? Elaborate a little. – Mohammad Basit Commented Sep 23, 2020 at 13:19
• If my invoiceCounter is 0,i want the badge to dissapear.Before,with the previous version of vueetify was working.I upgraded to 2.0,and even if my invoiceCounter is 0,it appears the badge. – Karim Husein Commented Sep 23, 2020 at 13:28

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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./en/api/v-badge/#props-value) the value property can be used for this. The v-badge value prop "Controls whether the ponent 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>

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

本文标签： javascriptHow to hide my badge if the value of the counter is 0Stack Overflow