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?

Boussadjra Brahim · Accepted Answer · 2018-11-15 22:32:07Z

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>

edited Nov 15, 2018 at 22:32

answered Nov 15, 2018 at 22:15

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related