Displaying the variations in a table

Add a table element to your variations container and loop through the items array. For now, display the title, quantity and price. Add an additional cell that contains a button with the value of Add to basket. We'll configure that in Chapter 11, Building an E-commerce Store – Adding a Checkout. Don't forget to add a $ currency symbol in front of your price, as it's currently just a "raw" number.

Watch out – when using the $ sign within the template literals, JavaScript will try and interpret it, along with the curly brackets, as a JavaScript variable. To counteract this, prepend the currency with a backslash – this tells JavaScript that the next character is literal, and should not be interpreted in any ...

Get Vue.js 2.x by Example now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.