Change css class on #click event of a table responsive table - css

Question

I would love to change the background color on a row in a table when i click on the tr.
That's the code of the table:
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th><small class="text-muted">#</small></th>
<th>Name</th>
<th>Heading</th>
<th>Productor</th>
</tr>
</thead>
<tbody>
<tr
v-for="company in allCompanies"
:key="company.id"
role="button"
#click="selectCompany(company)"
>
<td class="text-primary">
<small>#{{ company.id }}</small>
</td>
<td class="fw-bold">{{ company.name }}</td>
<td>{{ company.heading }}</td>
<td>
{{ company.productor }}
</td>
</tr>
</tbody>
</table>
</div>
And here the code of the method I call on the click event:
selectCompany(company) {
this.storeSelectedCompamy(company);
this.fetchShows(company.id);
console.log("change css");
}
Any help would be appreciated.
Thank you in advance
Valerio

Answer 1

Have a look here:
https://v2.vuejs.org/v2/guide/class-and-style.html
It looks like each <tr> corresponds to a company, so my approach would be to attach each row's state to its corresponding company as a property, and then toggle that property in selectCompany. Something like:
selectCompany(company) {
allCompanies.forEach(_company => _company.isSelected = false);
company.isSelected = true;
}
<tr
v-for="company in allCompanies"
:key="company.id"
:class="company.isSelected ? 'selected' : ''"
role="button"
#click="selectCompany(company)"
>