VueJS меняет строку таблицы в цикле индивидуально

Question

Я изо всех сил пытаюсь обернуть голову вокруг логики, стоящей за этим:

Я использую VueJS , чтобы показать некоторые записи из базы данных в таблице и показать ее динамическифильтрация, нумерация страниц и т. д. Кроме того, я хочу, чтобы при нажатии на строку она действовала как нажатая кнопка и изменяла background-color, затем она должна «скользить вверх», чтобы показать полное содержимое строки (так же, как полноереагирующий пользовательский интерфейс), но давайте сосредоточимся на изменении цвета фона: содержимое находится в таблице, Vue загружает все, что получено из моей конечной точки и показывает его, я создал класс .selected и отредактировал цикл v-for наtbody привязка выбранного класса к переменной selected, затем по щелчку запускается функция для изменения переменной true \ false.

Проблема в том, что, если я щелкаю по строке, цвет каждой строки изменяется, потому чтовсе они имеют одно и то же имя класса, и запуск его по одному запускает его для каждой строки.

Поскольку я еще не делился ни одним кодом, вот tbody во всей его красе, я не буду печатать VueЭто довольно просто: одна переменная в данных (selected = false) и одна функция в методах (isSelected).

<tbody v-for="(post, key) in posts" :key="post.id">

        <tr @click="isSelected()">
          <td><strong>@{{ post.id }}</strong> </td>
          <td>@{{ post.PID }}</td>
          <td>@{{ post.title }}</td>
          <td>@{{ post.slug }}</td>
          <td>@{{ post.content.substr(0,50) }}</td>
          <td>@{{ post.status }}</td>
          <td>@{{ post.likes_count }}</td>
          <td>@{{ post.comments_count }}</td>
          <td>@{{ post.publish_date }}</td>
        </tr>
      </tbody>

Как сделатьЯ подхожу к этому?Я думал о том, чтобы сделать имя класса динамичным, поэтому selected-N, где N - индекс строки, но это не похоже на правильное решение.

Как бы вы это сделали?Как вы обрабатываете многократные циклические данные, используя VueJS?Потому что после этого я хочу, чтобы все в этой таблице реагировало на действия пользователя (изменение цвета, например кнопки, чтобы вы знали, какая строка выбрана, скольжение вверх / вниз для отображения информации и \ или дополнительных параметров и т. Д.).

Редактировать:

Следуя совету Хусама:

Я изменил v-для части

<tbody v-for="(post, key) in posts" :key="post.id">

        <tr @click="selected(key)" :class="{ selectedRow: post.selected }">

Я имеюпроверено с некоторыми предупреждениями, и ключ правильно передается выбранной функции, а именно:

selected: function (key) {
        this.posts[key].selected = !this.posts[key].selected;

      } // end function

Также, когда я получаю объекты из вызова API, я создаю выбранное свойство, которое эффективно переключается вПравильный объект, когда я щелкаю по строке, проблема в том, что цвет не меняется, поэтому привязка класса :class="{ selectedRow: post.selected }" не переключает класс при нажатии, является ли post.selected правильными данными для предоставления?(класс selectedRow в уже созданном и измененном цвете фона)

Добавление дополнительной информации на случай, если кто-то еще окажется здесь:

Как предлагается в комментариях, добавление this.$forceUpdate() к моей selected(key) функция исправляет проблему:

selected: function (key) {
        this.$forceUpdate();
        this.posts[key].selected = !this.posts[key].selected;
      } // end function

Так в чем здесь проблема?