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

Add an else statement to make a copy of the billing address when the box is unchecked:

watch: {

sameAddress() {

if(this.sameAddress) {

this.delivery = this.billing;

} else {

this.delivery = Object.assign({}, this.billing);

}

}

}

We now have a functioning Order Confirmation page, which collects billing and delivery
details.

Creating an editable basket

We now need to create our basket. This needs to show the products in a similar fashion to
the Checkout and Confirmation, but it needs to give the user the ability to edit the basket

contents—either to delete an item or update the quantity.

As a starting point, open OrderBasket.js and include the list-purchases component,

as we did on the confirmation page:

const OrderBasket = {

name: 'OrderBasket',

template: `<div>

<h1>Basket</h1>

<list-purchases />

</div>`,

components: {

ListPurchases

}

};