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
  }
};

The 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...