Блог

Я бы хотел изменить цвет фона в строке таблицы, когда я нажимаю на 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

Посмотрите здесь:

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

Похоже, что каждый <tr> соответствует a company , поэтому мой подход заключался бы в том, чтобы привязать состояние каждой строки к соответствующему company ему свойству as, а затем переключить это свойство 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)"
>