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

Have a checkbox that keeps the two in sync—checking the box disables the

delivery box fields but populates them with the billing details

For this example, we are going to code the second option.

Create a checkbox between the two fieldsets that is bound to a property in the data object

via v-model called sameAddress:

<form @submit="submitForm()">

<fieldset>

...

</fieldset>

<label for="sameAddress">

<input type="checkbox" id="sameAddress" v-model ="sameAddress">

Delivery address is the same as billing

</label>

<fieldset>

...

</fieldset>

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

</form>

Create a new key in the data object and set it to false by default:

data() {

return {

sameAddress: false,

billing: {

name: '',

address: '',

zipcode: ''

},

delivery: {

name: '',

address: '',

zipcode: ''

}

}

},