O'Reilly logo

Vue.js 2.x by Example by Mike Street

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required