Question 44377 in Html Question posted in
Some basic documentation can be found here.

How to make button to be visible whole time and not to work only on click? – Html

<v-card :style="{ textAlign: 'left' }" class="basic-card pa-6" 
    :class="{ 'small-padding': !$vuetify.breakpoint.xl }"
      elevation="0" flat :height="windowHeight - 104 + 'px'" outlined align="start" justify="start">
        <v-row class="mt-0">
            <v-col cols="12" class="pt-0">
                <v-tabs v-model="eventTabs" center-active class="mx-0" grow>
                    <v-tab v-for="(tab, index) in eventAssets" :key="index"
                       :class="{ 'mr-1': index < (eventAssets.length - 1) }" class="pa-0 text-none">
                        <v-badge v-if="tab == 'Tasks' && uncompletedTasksNumber > 0" color="error"
                            :content="uncompletedTasksNumber" tile>
                            {{ tab }}
                        </v-badge>
                        <div v-else>
                            {{ tab }}
                        </div>
                    </v-tab>
                </v-tabs>
           </v-col>
       </v-row>
</v-card>

I tried a few changes but had no result, whole time if You want to see the counter(v-badge), You need to click on the button "Tasks" which is not what I want. We want to see it without any action.

Before clicking, when we want to see that counter:

When I click on the button "Tasks"

Tags:

3

Answers


  1. 0

    To make the counter badge visible at all times without requiring a click, you can remove the v-badge component and use a simple span element with a class that applies the styling you want. Try this:

    <v-tabs v-model="eventTabs" center-active class="mx-0" grow>
  <v-tab v-for="(tab, index) in eventAssets" :key="index"
     :class="{ 'mr-1': index < (eventAssets.length - 1) }" class="pa-0 text-none">
      <span v-if="tab == 'Tasks' && uncompletedTasksNumber > 0" class="badge badge-danger">
          {{ tab }} <span class="badge-counter">{{ uncompletedTasksNumber }}</span>
      </span>
      <div v-else>
          {{ tab }}
      </div>
  </v-tab>
</v-tabs>

    We use a span element with a class badge to add a red background colour, a border around the text, and another class badge counter to apply styling to the counter number. The counter is displayed inside a span element with the {{ uncompletedTasksNumber }} expression, which will display the actual number of uncompleted tasks.

    Login or Signup to reply.
  2. 0

    This is the answer you looking for? just add the uncompletednumber of task into the array when loop use v-if to do checking.
    Example Sandbox

    Example

    <span v-for="item in eventAssets" :key="item">
  <div style="display:inline">{{item.Type}} <span class="w3-badge w3-margin-left" v-if="item.UncompletedTaskNumber > 0">{{item.UncompletedTaskNumber}}</span></div>
</span>

 eventAssets:[
    {Type:'File', UncompletedTaskNumber:0},
    {Type:'Contact'},
    {Type:'Statement'},
    {Type:'Notes'},
    {Type:'Tasks', UncompletedTaskNumber:3},
  ]
    Login or Signup to reply.
  3. 0

    Your example should work as is, only two tiny modifications are needed. First, put {{ tab }} outside of v-badge because it is not part of v-badge. Second, use inline prop which will move the badge to inline with the wrapping element, i.e tab element.

    Here is a demo-

    const { createApp } = Vue
const { createVuetify } = Vuetify
const vuetify = createVuetify()

const app = createApp({
  data: () => ({
    eventTabs: true,
    uncompletedTasksNumber: 10,
    eventAssets: ["Tasks", "Options"],
  }),
}).use(vuetify).mount('#app')
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-card
      :style="{ textAlign: 'left' }"
      class="basic-card pa-6"
      elevation="0"
      flat
      outlined
      align="start"
      justify="start"
      >
      <v-row class="mt-0">
        <v-col cols="12" class="pt-0">
          <v-tabs v-model="eventTabs" center-active class="mx-0" grow>
            <v-tab
              v-for="(tab, index) in eventAssets"
              :key="index"
              :class="{ 'mr-1': index < eventAssets.length - 1 }"
              class="pa-0 text-none"
              >
              <div>{{ tab }}</div>
              <v-badge
                color="error"
                v-if="tab == 'Tasks' && uncompletedTasksNumber > 0"
                :content="uncompletedTasksNumber"
                inline
                >
              </v-badge>
            </v-tab>
          </v-tabs>
        </v-col>
      </v-row>
    </v-card>
  </v-app>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search