Quasar中使用computed属性动态切换SVG图标失效问题求助

你的代码无法正常工作的核心原因是：computed返回的是图标名称的字符串，而非导入的图标变量本身。Quasar的q-icon组件在使用从@quasar/extras导入的SVG图标时，需要直接绑定图标变量，而不是字符串形式的变量名。

修正后的代码如下：

<template>
  <q-icon :name="iconName" />
</template>

<script setup>
import { computed } from 'vue'
import { mdiCheckBold, mdiCloseThick } from '@quasar/extras/mdi-v7'

const iconName = computed(() => {
  if (/* 你的判断逻辑 */) return mdiCheckBold // 直接返回导入的图标变量
  return mdiCloseThick // 不要返回字符串形式的名称
})
</script>

原理说明 #

当你直接写:name="mdiCheckBold"时，Vue会将其解析为已导入的图标变量并传递给q-icon组件；如果返回字符串（比如'mdiCheckBold'），组件会把它当作普通的图标名称去查找，而这个字符串并不对应实际的SVG图标资源，因此无法正常显示。

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