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

We can now update our template to include the total price—ensuring we pass it through

the currency filter:

template: `<table>

<thead>

<tr>

<th></th>

<th>Title</th>

<th>Unit price</th>

<th>Quantity</th>

<th>Price</th>

</tr>

</thead>

<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>{{ product.quantity }}</td>

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

</tr>

</tbody>

<tfoot>

<td colspan="4">

<strong>Total:</strong>

</td>

<td>{{ totalPrice | currency }}</td>

</tfoot>

</table>`,