How to access an element attribute to conditionally set a class?

Question

Vue.js

Let's say we have a list of elements.

<li class="tile red" data-tile="1"></li>
<li class="tile blue" data-tile="2"></li>
<li class="tile yellow" data-tile="3"></li>
<li class="tile green" data-tile="4"></li>

In the properties, the number of the desired sector comes as:

props: {
        currentSector: Number
    }

I go to highlight the corresponding element of the list by giving it a class in something like this:

:class="[this.currentSector ===  (здесь значение атрибута)  ? 'hightlighted' : '' ]"

How can I do that?

Answer 1

If you have this list built through v-for, then it doesn’t cost anything to slip the right class on the right element.