Vuetify v-data-table v-if 问题

Question

好的，所以我有一个v-data-table，其中有一列有条件地显示checkmark 图标或x 图标：

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

问题是：在对表中的数据进行分页时，v-if 评估不同的行会保持呈现，因为它们不会消失，并且实际上会附加更多图标而不是替换那里有什么。

假设在第 1 页上，第三行的状态为 0，因此它呈现 x，然后在第 2 页上，第三行的状态为 1，但没有显示 @987654330 @，它显示x checkmark。然后我切换回第 1 页，它仍然显示x checkmark...然后当我返回第 2 页时，它显示x checkmark checkmark，依此类推，我来回切换的次数也是如此。

还有其他人遇到过这个问题吗？

我尝试改用v-show，但这个也很奇怪——它只呈现第一页的结果，在切换页面时不会改变。我想也被认为是一个错误。

Answer 1

哦，打扰了。在项目中有一个将 FA 图标转换为 SVG 的实用程序，这样做会覆盖 v-data-table 的默认行为。切换到 Material 图标，工作正常。