Building an E-Commerce Store - Adding a Checkout Chapter 11: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 }}</td>
<td>{{ product.quantity }}</td>
<td>{{ product.variation.price * product.quantity }}</td>
</tr>
</tbody>
</table>`,Note that the price for each row is simply the unit price multiplied by the quantity. We now
have a standard product list of the items the user has purchased.
Using Vue filters to format the price
The price is currently an integer, as that it is in the data. On the product page, we just
prepended a $ sign to represent a price, however, this is now the perfect opportunity to
utilize Vue filters. Filters allow you to manipulate the data in the template without using a
method. Filters can be chained and are used to carry out, generally, a single
modification—for example converting a string to lowercase or formatting a number to be a
currency.
Filters are used with the pipe (|) operator. If, for example, we had a filter to lowercase text,
it would be used like the following:
{{ product.title | lowercase }}Filters are declared within a filters object on the component and accept a single
parameter of the output preceding it.