Vuetify - Как выделить строку по клику в v-data-таблице

Question

Как выделить выделенную строку в v-data-таблице? Я попытался изменить данные, добавив флаг переменной selected в Пример

В приведенном выше примере щелчок на строке будет выделен путем добавления класса с именем primary. Если это статические данные, они работают нормально, но если это динамические данные, такие как получение данных из API, данные в таблице данных всегда будут обновляться, если я изменю нумерацию страниц и сортировку, и все.

Например, в моем случае, если я отсортирую столбец, данные будут поступать из API, а данные в v-data-таблице будут обновлены отсортированными данными, в этом случае очень трудно поддерживать, что selected отмечать каждый раз, когда когда-либо данные изменяются. Есть ли другой способ выделить выбранную строку?

Answer 1

Ваше решение не работает, поскольку свойство selected добавляется к данным при щелчке строки, но при перезагрузке данных данные без свойства selected заменяют старые данные.

Чтобы заставить его работать:
- добавьте поле id к каждому элементу в списке десертов
- добавьте selectedId со значением по умолчанию -1 к вашим данным
- измените строкукод в методе от activerow до this.selectedId = item.id;
- измените атрибут класса в <tr> на :class="{'primary': props.item.id===selectedId}"

Если при перезагрузке только ваш список десертов изменится, иновый список содержит элемент с тем же идентификатором, который был выбран ранее, затем должна быть выбрана та же строка.

Я разобрал пример кода ручки, чтобы показать вам, как это работает:
https://codepen.io/anon/pen/PrWjxQ?editors=1010