How to call two methods on a @click event in a Vue component

You might be tempted to do something like this:

<!-- Don't do this! -->
<button @click="runThis(); thenRunThis();">Click me!</button>

While this may work, if you later need to add more methods, it will get harder and harder to read. And if you need to get a result from the first function before you can run the second, embedding both calls into the template’s @click event is going to get increasingly messy.

<!-- Don't do this either! -->
<button @click="let x = runThis(); thenRunThis(x);">Click me!</button>

A better solution is to create a clickHandler method to wrap all the methods you want to call on a click:

<!-- Do this! -->
<button @click="clickHandler">Click me!</button

// Then in your component methods add the clickHandler:
methods: {
  clickHandler: function() {
    let x = this.runThis()
    this.thenRunThis(x)
  }
  ...
}

By following this pattern, you end up with a clean and easy to understand event call in your template, and you have a place to add any new functionality your button may need in the future in the clickhandler method.