Vuetify 3 v-data-table条件渲染v-icon失败求助

针对你遇到的问题，给你几个可行的解决思路：

• 先确认数据类型
  很多时候问题出在item.active的类型上，如果后端返回的是字符串格式的"1"或"0"，用item.active == 1会因为类型不匹配导致判断失效。可以改成严格相等判断：

  <template v-slot:items.active="{ item }">
    <v-icon v-if="item.active === 1" size="small">mdi-pencil</v-icon>
    <v-icon v-else size="small">mdi-delete</v-icon>
  </template>
  

  如果是字符串类型，就改成：

  <v-icon v-if="item.active === '1'" size="small">mdi-pencil</v-icon>
  

• 用三元表达式简化写法
  Vuetify3完全支持在模板里使用三元表达式，这种写法更简洁，也能避免v-if/v-else可能出现的渲染问题：

  <template v-slot:items.active="{ item }">
    <v-icon size="small">{{ item.active === 1 ? 'mdi-pencil' : 'mdi-delete' }}</v-icon>
  </template>
  

• 检查响应式与数据正确性
  确认你的items数据是Vue3的响应式数据（比如用ref或reactive声明），同时可以在插槽里临时打印{{ item.active }}，确认渲染时拿到的值是预期的1或0，排除数据传递的问题。

内容的提问来源于stack exchange，提问作者Julian Rayman