нажмите действие не работает на значке vuetify

нажмите действие не работает на значке vuetify

02.10.2018 09:50:57 Просмотров 33 Источник

Мы недавно начали использовать Vue и Vuetify. В рамках приложения мне нужно написать действие click на значке 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>
У вопроса есть решение - Посмотреть?

Ответы - нажмите действие не работает на значке vuetify / click action not working on vuetify badge

tony19

02.10.2018 10:52:10

Вместо divдля слота значка можно использовать v-btn:

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

Tarabass

28.01.2020 04:00:21

Вы должны использовать nativeмодификатор на вас clickсобытие.

@click.native="togglePopover"

Из документации VueJS

.native-прослушивание собственного события в корневом элементе компонента.

Для получения дополнительной информации и всех доступных модификаторов нажмите здесь: https://vuejs.org/v2/api/#v-on

Закрыть X