Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Building an E-Commerce Store - Adding a Checkout Chapter 11

The next step is to create a submit method and collate the data to be able to pass it on to

the next screen. Create a new method titled submitForm(). As we are not handling

payment in this example, we can route to the confirmation page in the method:

methods: {

submitForm() {

// this.billing = billing details

// this.delivery = delivery details

this.$router.push({name: 'Confirmation'});

}

}

We can now bind a submit event to the form and add a submit button. Like the v-

bind:click attribute (or @click), Vue allows you to bind a submit event to a method

using a @submit="" attribute.

Add the declaration to the

<form @submit="submitForm()">

<fieldset>

</fieldset>

<fieldset>

</fieldset>

<input type="submit" value="Purchase items">

</form>

Have a "copy details" button—this copies the details from billing to delivery but

does not keep them in sync