When using attribute bindings, classes are a special case because we can pass additional data to determine when to apply certain classes. To see this in action, let's add a strikeout to some items in this shopping list step. Here, we have an LI for each item in an item's reactive wrap. To add a strikeout class, let's use the special object syntax.
Here, our object property is the name of the class we'd like to toggle. css file. The value is the conditional we respond to. For us, that's whether or not the item has a truthy purchase property.
Also, now we must destructure purchased from the item. Great. Now let's uncomment our initial data set of items and randomly add purchase properties to each one. Over on the right-hand side, you can see now that the items with their purchase property set to true have a strikeout through them, while the last one doesn't.
Pretty incredible, right? If we take a moment to inspect them, we can see that the class is actually getting toggled in the DOM. Nice. With the object syntax, we can also continue to add other conditional classes if we'd like.
For instance, let's add a high priority property to our items. And I'll initialize some as false and others as true. Now, in the class binding, we can keep track of both conditionals. Awesome.
This is pretty great. But what if we also wanted to include some static classes? It would be kind of silly to have to do something like static class true. Technically, this would work.
If we inspect the element, you'll see that all the allies do, in fact, have that static class. However, a less verbose way to do it would be just to add a regular class attribute for any static classes in addition to the bound classes. Cool. Another special syntax available for adding classes is the array syntax.
To demonstrate, I'll make a copy of our allies, effectively duplicating each item in our list. Now, with the array syntax, each element in the array is another class. As is, these classes are static, and there's no condition specifying whether or not to add them. Sure enough, over on the right-hand side, each list item has a duplicate row that always includes both the strikeout and priority classes.
If we wanted to make the classes conditional in the array syntax, we'd have to do that manually with an expression that uses the ternary operator. purchased is true, or even provide a different class when purchased is false. Awesome. Lastly, we can even combine the array syntax and the object syntax together if we wanted to.
This will result in the exact same classes being added as in the ally just above. Finally, while we're adding in these arrays and objects directly in our template, should your use case call for it, you could also define them as reactive refs. All right, with our dynamic strikeout set up, let's add a method to toggle it on each item. First, I'll remove this extra line, as it's not needed and was only added for demonstration purposes.
Then we'll create a new method called toggle purchased. As an argument, we can pass the item itself to the function and then update the purchase property directly. purchased to its opposite, effectively toggling it. With the method taken care of, we can now add it to each li with the von directive.
Now, since we've destructured the item within the v-for, we don't actually have direct access to the item. So we've got a couple of different options. We could target the item in the items array with the index. And that would work just fine.
Or we could get the item directly in the v-for and then use it. This means, though, that we'd have to prefix all the properties that we had destructured out before with item dot. I'll go ahead and do that. Awesome.
Now clicking on each of the items in the shopping list toggles its purchase property. Now that we're styling high priority items, let's also make the high priority checkbox actually affect the newly created items. In the save method, we'll set the high priority property on the new item to new item high priority dot value. And in both places where we're resetting new item, let's also reset the high priority.
All right, let's give it a try. The item has the right styling. And yep, it has the priority class. Awesome.
There's nothing to it with Vue.