改变响应表的@click事件的css类

Question

当我点击tr时，我想改变表中一行的背景颜色。

这是表的代码:

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

这里是我在click事件上调用的方法代码:

selectCompany(company) {
this.storeSelectedCompamy(company);
this.fetchShows(company.id);
console.log("change css");
}

任何帮助都会很感激。提前谢谢你

Valerio

Answer 1

看这里:

https://v2.vuejs.org/v2/guide/class-and-style.html

看起来每个<tr>对应于一个company，所以我的方法是将每一行的状态附加到其相应的company作为属性，然后在selectCompany中切换该属性。比如:

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)"
>