如何捕获v-bind绑定错误Font Awesome图标时的异常？

因为@error事件仅针对<img>标签的src加载失败场景，对font-awesome-icon组件的:icon绑定无效，你可以通过以下两种方式处理：

方法一：提前校验图标合法性 #

利用Font Awesome的library对象提前校验用户输入的图标是否已注册，从根源避免错误抛出：

1. 确保项目中已导入并注册所需的Font Awesome图标库：

import { library } from '@fortawesome/fontawesome-svg-core'
import { faInstagram, faTwitter } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faInstagram, faTwitter)
Vue.component('font-awesome-icon', FontAwesomeIcon)

2. 在组件内编写校验函数，判断用户输入的图标是否存在：

methods: {
  isValidIcon(iconStr) {
    if (!iconStr) return false
    // 将用户输入的字符串拆分为前缀和图标名，比如'fab fa-instagram'拆成['fab', 'instagram']
    const [prefix, iconName] = iconStr.split(' ')
    // 检查library中是否存在该图标
    return library.icon({ prefix, iconName }) !== null
  },
  getDisplayContent(iconStr) {
    return this.isValidIcon(iconStr) 
      ? { type: 'icon', value: iconStr.split(' ') }
      : { type: 'text', value: '无效图标' } // 替换为你需要的提示文本
  }
}

3. 模板中根据校验结果渲染对应内容：

<template>
  <div>
    <font-awesome-icon 
      v-if="getDisplayContent(link.link_icon).type === 'icon'"
      class="h-10 w-10 mr-auto" 
      :icon="getDisplayContent(link.link_icon).value" 
    />
    <span v-else>{{ getDisplayContent(link.link_icon).value }}</span>
  </div>
</template>

方法二：用Vue错误捕获钩子兜底 #

如果提前校验无法覆盖所有场景，可通过组件的errorCaptured钩子捕获内部错误，再切换显示内容：

1. 在父组件中添加错误捕获逻辑：

export default {
  data() {
    return {
      hasIconError: false,
      targetIcon: link.link_icon
    }
  },
  errorCaptured(err, vm, info) {
    // 判断是否为Font Awesome图标加载错误
    if (info.includes('font-awesome-icon') && err.message.includes('Could not find icon')) {
      this.hasIconError = true
      return false // 阻止错误向上传播
    }
  }
}

2. 模板中根据错误状态切换渲染：

<template>
  <div>
    <font-awesome-icon 
      v-if="!hasIconError"
      class="h-10 w-10 mr-auto" 
      :icon="targetIcon.split(' ')" 
    />
    <span v-else>无效图标</span>
  </div>
</template>

补充说明 #

• 若使用Font Awesome 6+版本，library.icon()的校验逻辑保持一致，仍可正常使用。
• 优先推荐方法一，提前校验能避免错误抛出，性能更优且用户体验更顺畅。

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