Vue.js- 调用函数并使用 v-on 运行表达式：单击

Posted 2023-02-22

【中文标题】Vue.js- 调用函数并使用 v-on 运行表达式：单击

【英文标题】：Vue.js- Calling a function AND running an expression with v-on:click

【发布时间】：2019-04-19 02:19:40

【问题描述】：

This answer 展示了如何使用v-on 调用两个函数，方法是使用v-on:click="firstFunction(); secondFunction();"。但是在我的项目中，除了Vuetify 强加的表达式之外，我还需要调用一个函数。默认Vuetify 代码为：

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

但是除了表达式 dialog = false，我需要调用某个函数newRow()。我试过了：

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

但这破坏了Vuetify 功能（对话框不再关闭）。有什么建议吗？

【参考方案1】：

在您的 newRow() 方法中添加：

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

并在模板中调用它：

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