Vue - Apply a default class for element which toggles

Hi there,

I’ve been working through the Vue Mastery Intro To Vue JS series and have come to the part where you switch between colours but it doesn’t state how to set a default.

What would be the best way to apply this in my case? I currently have the page setup so that you can switch colours and it will highlight it using a “selected” class.

I have attempted to apply it inline via the “:class” when the index is 0 using || for the condition, but this obviously cannot then be removed.

Many thanks!

Hi all,

Revisited this with a fresh mind and turns out I just needed to set the “selectedColour” property from “null” to a default index such as “0” so that it would show on load - doh!

Hope this helps someone working through the course if they want to extend the code a little.

EDIT: Further update to note that the “selectedColour” can be removed and replaced with “selectedVariant” in both the HTML and JS instead, so that the colour selection also changes the variant selected and therefore updates the details along with it (see the “Sale” callout turning off/on as you switch colours).

3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.