更改表响应表的@click事件上的css类

当我点击

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) {
  allCompanies.forEach(_company => _company.isSelected = false);
  company.isSelected = true;
}

我喜欢你的解决方案，但我发现了两个问题：第一，我丢失了：hover颜色，第二个似乎不起作用。也许我犯了一些错误使用

：hover

颜色是因为

样式

属性覆盖了CSS。使用类应该可以解决这个问题。我已经更新了我的代码。至于它不起作用，可能有很多原因。你能提供一个代码片段来使用吗？对不起，我的英语很差……你说的“代码片段”到底是什么意思？如果粘贴一个.vue文件的完整代码，那么会是ENOUGHT吗？谢谢您的帮助否，不是

.vue

文件。在StackOverflow上，“snippet”是StackOverflow将运行的一段代码。这样回答问题就容易多了。以下是更多信息：

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