нажмите действие не работает на значке vuetify
Мы недавно начали использовать 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
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>28.01.2020 04:00:21
Вы должны использовать nativeмодификатор на вас clickсобытие.
@click.native="togglePopover"
Из документации VueJS
.native-прослушивание собственного события в корневом элементе компонента.
Для получения дополнительной информации и всех доступных модификаторов нажмите здесь: https://vuejs.org/v2/api/#v-on