Alright, so I have a v-data-table with one column that conditionally shows either a checkmark icon or an x icon :
<v-data-table :headers="headers" :items="items" item-key="id">
<template v-slot:headers="props">
<tr>
<th v-for="header in props.headers" :key="header.text">{{ header.text }}</th>
</tr>
</template>
<template v-slot:items="props">
<tr>
<td>{{ props.item.id }}</td>
<td>{{ props.item.name }}</td>
<td>
<v-icon v-if="props.item.status === 1" color="light-green">fas fa-check</v-icon>
<v-icon v-if="props.item.status === 0" color="red">fas fa-times</v-icon>
</td>
</tr>
</template>
</v-data-table>
The issue is: While paginating the data in this table, rows where v-if evaluate differently stay rendered, as in they don't go away, and more icons are actually appended rather than replacing what's there.
So say on Page 1, the third row has a status of 0, so it renders an x, then on Page 2, the third row has a status of 1, but instead of showing checkmark, it shows x checkmark. Then I switch back to Page 1, and it shows x checkmark still... then when I go back to Page 2, it shows x checkmark checkmark, and so on as many times as I switch back and forth.
Has anyone else encountered this issue?
I've tried instead using v-show, but this one also acts weirdly - it only renders the result of the first page, and doesn't change when switching pages. I guess also considered a bug.
