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

Question

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

Answer 1

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/vuetify@3.1.2/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@3.1.2/dist/vuetify.min.css">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/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>