Building an E-Commerce Store - Adding a Checkout Chapter 11<input type="text" id="deliveryAddress">
<label for="deliveryZipcode">Post code/Zip code:</label>
<input type="text" id="deliveryZipcode">
</fieldset>
</form>
</div>',We now need to create a data object and bind each field to a key. To help group each set,
create an object for both delivery and billing and create the fields inside with the
correct names:
data() {
return {
billing: {
name: '',
address: '',
zipcode: ''
},
delivery: {
name: '',
address: '',
zipcode: ''
}
}
}Add a v-model to each input, linking it to the appropriate data key:
<form>
<fieldset>
<h2>Billing Details</h2>
<label for="billingName">Name:</label>
<input type="text" id="billingName" v-model="billing.name">
<label for="billingAddress">Address:</label>
<input type="text" id="billingAddress" v-model="billing.address">
<label for="billingZipcode">Post code/Zip code:</label>
<input type="text" id="billingZipcode" v-model="billing.zipcode">
</fieldset>
<fieldset>
<h2>Delivery Details</h2>
<label for="deliveryName">Name:</label>
<input type="text" id="deliveryName" v-model="delivery.name">
<label for="deliveryAddress">Address:</label>
<input type="text" id="deliveryAddress" v-model="delivery.address">
<label for="deliveryZipcode">Post code/Zip code:</label>
<input type="text" id="deliveryZipcode" v-model="delivery.zipcode">
</fieldset>
</form>