Displaying variations in a select box

A more common interface pattern on product pages is to have a drop-down list, or select box, with your variations displayed and available for selecting.

When using a select box, we will have a variation which has either been selected by default or that the user has interacted with and chosen specifically. Because of this, we can change the image when the user changes the select box and display other pieces of information about the variant on the product page, including price and quantity.

We won't be relying on passing through the variant to the addToBasket method, as it will exist as an object on the product component.

Update your <table> element to be a <select>,  and the <tr> to an <option>. Move the ...

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

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.