I'm using v-slot:activator with v-btn in my Vuejs project. it works fine but the button stays hovered as if it was pressed

       <v-dialog v-model="dialog" max-width="600px">
        <template v-slot:activator="{ on, attrs }">
          <v-btn color="#F65C38" dark  width="209px" v-on="on" v-bind="attrs"> Example Btn </v-btn>
        </template>
        <v-card>
          <v-card-title>
            <span >{{ 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 >
            <v-btn color="#f66037" plain @click="close" elevation="4" dark width="209" > No </v-btn>
            <v-btn color="#F65C38" @click="save" dark width="209" > 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

after click

CodePudding user response：

You can remove focus manually using native JS method:

document.activeElement.blur()

In your example you can place this row into $nextTick:

...
close() {
  this.dialog = false;
  this.$nextTick(() => {
    this.editedItem = Object.assign({}, this.defaultItem);
    this.editedIndex = -1;
    document.activeElement.blur()
  });
},

Test this at CodePen.