Vue.js- Calling a function AND running an expression with v-on:click

Question

This answer shows how to call two functions with v-on by doing v-on:click="firstFunction(); secondFunction();". But in my project, I need to call a function besides an expression imposed by Vuetify. The default Vuetify code is:

<v-btn color="success" @click="dialog = false">
  Save Row
</v-btn>

However beside the expression dialog = false, I need to call a certain function newRow(). I tried:

 <v-btn color="success" @click="newRow(); dialog = false">
    Save Row
</v-btn>

But that breaks the Vuetify functionality (the dialog doesn't close anymore). Any suggestion?

Answer 1

Inside your newRow() method add :

      methods:{
          newRow(){
           //here put the logic to add new row 
           //and after that close the dialog box
           this.dialog=false;
           }
      ...
     }

and call it in the template like :

  <v-btn color="success" @click="newRow()">
    Save Row
  </v-btn>