Estoy usando v-slot:activator con v-btn en mi proyecto Vuejs. funciona bien, pero el botón permanece suspendido como si estuviera presionado
<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>datos:
dialog: falsereloj:
dialog(val) { val || this.close(); },método:
close() { this.dialog = false; this.$nextTick(() => { this.editedItem = Object.assign({}, this.defaultItem); this.editedIndex = -1; });Puede eliminar el foco manualmente usando el método JS nativo:
document.activeElement.blur() En su ejemplo, puede colocar esta fila en $nextTick :
... close() { this.dialog = false; this.$nextTick(() => { this.editedItem = Object.assign({}, this.defaultItem); this.editedIndex = -1; document.activeElement.blur() }); },Prueba esto en CodePen .