Building an E-Commerce Store - Adding a Checkout Chapter 11The next thing we need to do is edit the list-purchases component. To ensure we can
differentiate between the views, we are going to add an editable prop. This will be set to
false by default and true in the basket. Add the prop to the component in the basket:
template: `<div>
<h1>Basket</h1>
<list-purchases :editable="true" />
</div>`,We now need to tell the ListPurchases component to accept this parameter so we can do
something with it within the component:
props: {
editable: {
type: Boolean,
default: false
}
},Creating editable fields
We now have a prop determining if our basket should be editable or not. This allows us to
show the delete links and make the quantity an editable box.
Create a new table cell next to the quantity one in the ListPurchases component and
make it visible only when the purchases are visible. Make the static quantity hidden in this
state too. In the new cell, add an input box with the value set to the quantity. We are also
going to bind a blur event to the box. The blur event is a native JavaScript event that
triggers when the input is unfocused. On blur, trigger an updateQuantity method. This
method should accept two arguments; the event, which will contain the new quantity, and
the SKU for that particular product:
<tbody>
<tr v-for="product in products">
<td>
<img
:src="product.image.source"
:alt="product.image.alt || product.variationTitle"
width="80"
>
</td>
<td>
<router-link :to="{name: 'Product', params: {slug: product.handle}}">
{{ product.title }}
</router-link><br>