Vue/Vuetify 表示图标值未定义或为空

Question

我从数据库加载项目列表，这些项目将在列表中显示给用户。每个项目都是特定的类型，根据类型，我希望在它旁边显示一个图标。

我已经创建了一个组件来控制将要显示的图标。该组件接受 type sa 属性并相应地呈现 mdi-icon。

<div v-if="iconName !== ''">
  <v-icon large color="blue-grey darken-2"> 
    {{ iconName }}
  </v-icon> 
  </div>

iconName 的值是在挂载时提供的，或者是计算出来的属性 - 我都试过了。

export default {
  props: ["activityType"],

  data() {
    return {
      iconType: this.activityType, 
      iconName: 'mdi-script-text-outline', 
      iconMapping: {
        learning_material_video: "mdi-video",
        learning_material_quiz: "mdi-head-question-outline",
        learning_material_article: "mdi-script-text-outline",
      },
    };
  },
  methods: {},
  mounted(){
    this.iconName = this.iconMapping[this.iconType]
  },
  computed: {
    // iconName() {
    //   return this.iconMapping[this.activityType]
    // },
  },
};

这呈现得非常好，我可以忽略并继续处理下一个组件，但控制台中的错误有点令人担忧。

Uncaught (in promise) Error: Icon value is undefined or null
at ReactiveEffect.eval [as fn] (icons.tsx?ff78:168:1)
at ReactiveEffect.run (reactivity.esm-bundler.js?89dc:167:1)
at ComputedRefImpl.get value [as value] (reactivity.esm-bundler.js?89dc:1101:1)
at Proxy.eval (VIcon.tsx?e5c2:53:1)
at renderComponentRoot (runtime-core.esm-bundler.js?d2dd:893:1)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?d2dd:5098:1)
at ReactiveEffect.run (reactivity.esm-bundler.js?89dc:167:1)
at callWithErrorHandling (runtime-core.esm-bundler.js?d2dd:155:1)
at flushJobs (runtime-core.esm-bundler.js?d2dd:394:1)
at flushJobs (runtime-core.esm-bundler.js?d2dd:409:1)

这对页面的外观或工作方式没有影响，但我担心这是否会在以后造成问题。我进入 Vue 还不到 5 天，我可能在这里做错了什么。我的代码是正确的方法还是可以做得更好？

ps。这是 Vuetify-3。

Answer 1

I load a list of items from the db

我认为问题出在某个地方。您得到的错误基本上是说，当您获取数据时，出现了问题，但您没有 catch 它（不要对此做任何事情）。我认为在您的情况下，您需要捕获错误并为 catch 块内的 Icon 分配一个值。

Answer 2

你应该使用安全防护装置：

<template>
  <div>
    <v-icon large color="blue-grey darken-2">{{ iconName }}</v-icon> 
  </div>
</template>

<script>
export default
{
  name: 'MyCustomComponent',
  props:
  {
    activityType:
    {
      type: String,
      default: ''
    }
  },
  computed
  {
    iconName()
    {
      return {
        learning_material_video: "mdi-video",
        learning_material_quiz: "mdi-head-question-outline",
        learning_material_article: "mdi-script-text-outline",
      }[this.activityType] || 'mdi-script-text-outline';
    }
  }
}

Vue/Vuetify 表示图标值未定义或为空

Vue/Vuetify says Icon value is undefined or null

vue.js

vuetify.js

material-design-icons

vuetifyjs3