在表响应表的@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>

这里是我在点击事件上调用的方法的代码：

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

任何帮助将不胜感激。 提前谢谢你

瓦莱里奥

Answer 1

看看这里：

https://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)"
>