Vuetify: [Bug Report] Badge doesn't work in a v-list-item-avatar

Created on 27 Jun 2019  路  2Comments  路  Source: vuetifyjs/vuetify

Versions and Environment

Vuetify: 2.0.0-beta.4
Vue: 2.6.9
Browsers: Safari 12.1.1
OS: Mac OS 10.14.5

Steps to reproduce

As this code shows, I want to place a badge on the top of the avatar.

          <v-list-item-avatar>
            <v-badge
              color="purple"
              overlap
              right
            >
              <template v-slot:badge>
                <span v-if="item.messages > 0">{{ item.messages }}</span>
              </template>
              <v-img :src="item.avatar"></v-img>
            </v-badge>

          </v-list-item-avatar>

Expected Behavior

I want to place a badge on the top of the avatar.

Actual Behavior

The badge doesn't show, and the avatar become a larger icon.

Reproduction Link

https://codepen.io/bigplum/pen/NZaQVa

triage

Most helpful comment

Meanwhile better

<v-list-item-avatar>
  <v-badge
    color="purple"
    overlap
    right
  >
    <template v-slot:badge>
      <span v-if="item.messages > 0">{{ item.messages }}</span>
    </template>
    <v-avatar size="36">
      <v-img :src="item.avatar"></v-img>
    </v-avatar>
  </v-badge>

</v-list-item-avatar>

All 2 comments

Meanwhile better

<v-list-item-avatar>
  <v-badge
    color="purple"
    overlap
    right
  >
    <template v-slot:badge>
      <span v-if="item.messages > 0">{{ item.messages }}</span>
    </template>
    <v-avatar size="36">
      <v-img :src="item.avatar"></v-img>
    </v-avatar>
  </v-badge>

</v-list-item-avatar>

@Billybob It works, well done, thanks.

Was this page helpful?
0 / 5 - 0 ratings