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

Removing items from your cart

The next step is to give the user the ability to remove items from their cart. Create a button
in the ListPurchases component with a click binding. This button can go anywhere you

want - our example shows it as an extra cell at the end of the row. Bind the click action to a
method titled removeItem. This just needs to accept a single parameter of the SKU. Add

the following to the ListPurchases component:

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

{{ product.variationTitle }}

</td>

<td>{{ product.variation.price | currency }}</td>

<td v-if="!editable">{{ product.quantity }}</td>

<td v-if="editable"><input

type="text"

:value="product.quantity"

@blur="updateQuantity($event, product.sku)"

></td>

<td>{{ product.variation.price * product.quantity | currency }}</td>

<td v-if="editable">

<button @click="removeItem(product.sku)">Remove item</button>

</td>

</tr>

</tbody>