vuetify 배지에서 작동하지 않는 클릭 작업

vuetify 배지에서 작동하지 않는 클릭 작업

최근에 Vue와 Vuetify를 사용하기 시작했습니다.어플리케이션의 일부로 Vuetify 배지에 클릭 액션을 써야 하는데 왜 작동하지 않는지 모르겠습니다.다음의 코드 스니펫을 시험해 보았습니다.

<v-badge bottom
               left
               overlap
               :color="red">
        <div slot="badge"
             @click="togglePopover"
             class="availability"></div>
        <Avatar :objData="data.image"
                :size="size"
                :applyBoarder="applyBoarder">
          <slot></slot>
        </Avatar>
      </v-badge>

<script>
  export default {
    methods: {
    togglePopover(e) {
      alert('click action');
    }
  }
</script>

를 사용해야 합니다.native수식어click이벤트입니다.

@click.native="togglePopover"

VueJs 매뉴얼 참조

.component - 컴포넌트의 루트 요소에 대한 네이티브이벤트를 리슨합니다

자세한 내용과 사용 가능한 모든 수식어를 보려면 https://vuejs.org/v2/api/ #v-on을 클릭하십시오.

대신div배지 슬롯에는, 다음과 같이 사용할 수 있습니다.

<v-badge>
  <v-btn slot="badge" @click="togglePopover">
    <v-icon>done</v-icon>
  </v-btn>
</v-badge>

new Vue({
  el: '#app',
  methods: {
    togglePopover() {
      console.log('click');
    }
  }
})

@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons);
@import url(https://cdn.jsdelivr.net/npm/vuetify@1.2.6/dist/vuetify.min.css);

#app {
  padding-top: 20px;
}

<script src="https://unpkg.com/vue@2.5.17"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.2.6/dist/vuetify.min.js"></script>

<div id="app">
  <v-app id="inspire">
    <div class="text-xs-center">
      <v-badge
        color="purple"
        left
        overlap
      >
        <v-btn slot="badge"
               flat
               icon
               dark
               small
               :ripple="false"
               @click="togglePopover">
          <v-icon>done</v-icon>
        </v-btn>
        <v-icon
          color="grey lighten-1"
          large
        >
          account_circle
        </v-icon>
      </v-badge>
    </div>
  </v-app>
</div>

저는 z-index를 추가하지 않으면 @tony19의 답변이 작동하지 않았습니다.

<v-badge
    bordered
    color="red"
    overlap
>
    <v-icon slot="badge" style="z-index: 1;" @click="doSomething">
        mdi-close
    </v-icon>
    <v-img
        class="rounded-lg"
        height="100"
        width="100"
        aspect-ratio="1"
        src="https://placekitten.com/g/300/300"
    />
</v-badge>

배지가 부착된 아이템은 클릭했을 때 동작하지만 배지 자체는 동작하지 않습니다.회피책은 다음과 같습니다.배지에 감긴 항목과 함께 내용 슬롯을 표시하려면 div를 추가합니다.

이 예에서는 데이터 값을 사용합니다.count배지의 내용입니다.

      <v-badge>
        <!-- WORKAROUND badge is not clickable -->
        <template #badge>
          <div
              style="cursor: pointer"
              @click="$emit('show-settings')">
            {{ String(count) }}
          </div>
        </template>
        <v-btn icon @click="$emit('show-settings')">
          <v-icon>settings</v-icon>
        </v-btn>
      </v-badge>

언급URL : https://stackoverflow.com/questions/52614623/click-action-not-working-on-vuetify-badge