In my Vuejs project, I am utilizing v-slot:activator with v-btn. Everything is functioning properly, except that the button remains in a hovered state as if it has been pressed.
<v-dialog v-model="dialog" max-width="600px">
<template v-slot:activator="{ on, attrs }">
<v-btn color="#F65C38" dark class="mt-1 mr-2" width="209px" v-on="on" v-bind="attrs"> Example Btn </v-btn>
</template>
<v-card>
<v-card-title>
<span class="text-h5">{{ formTitle }}</span>
</v-card-title>
<v-card-text>
<v-form ref="form" v-model="valid">
<v-container>
<v-row>
</v-row>
</v-container>
</v-form>
</v-card-text>
<v-card-actions class="d-flex justify-center">
<v-btn color="#f66037" plain @click="close" elevation="4" dark width="209" class="mb-6"> No </v-btn>
<v-btn color="#F65C38" @click="save" dark width="209" class="mb-6"> save </v-btn>
</v-card-actions>
</v-card>
</v-dialog>
data:
dialog: false
watch:
dialog(val) {
val || this.close();
},
method:
close() {
this.dialog = false;
this.$nextTick(() => {
this.editedItem = Object.assign({}, this.defaultItem);
this.editedIndex = -1;
});
before click https://i.sstatic.net/osHCY.png
after clickhttps://i.sstatic.net/5BzN0.png