Chain a Vuex Action in a Vue Template

Did you know that you can call more than one method in an event binding? Event bindings usually take one method to call when it fires. By chaining methods, you can call more than one method on an event.

How it works

Say you’re making a super simple app with a form. When that form is submitted you want to update a database and then clear the form. That’s it.

Since your app is so small, you might want to try to keep your code minimal, too. Here’s how you might write it…

What sucks about that app is that when you submit the form, it doesn’t clear itself after. And it almost hurts to give up that sleek mapActions one-liner, just to reset the data.

It’s OK. Vue let’s you call then() right in the event binding and pass another method. Like this…

Specifically this

<form @submit.prevent="saveName(name).then(clear)">

Good going Vue, you slick framework you ;-)