如何在Nuxt的Watcher中构建HTML时使用Font Awesome图标？

问题原因 #

<fa>是Vue组件，只有在Vue模板里才会被编译为对应的DOM元素。而你通过字符串拼接传给Google Maps InfoWindow的内容，是由Google Maps直接插入DOM的，这部分不在Vue的管理范围内，Vue不会解析<fa>标签，所以图标无法显示。

解决方案 #

方法1：直接使用Font Awesome原生HTML标签

直接拼接Font Awesome的原生<i>标签及对应类名，替代Vue组件：

watch: {
    events(newEvents, _) {
        let infoWindowContent = ''

        newEvents.forEach((event) => {
            infoWindowContent = infoWindowContent.concat(
            `<div><i class="fas fa-circle"></i> 图标可以正常显示了</div>`
            )
        })

        const infowindow = new window.google.maps.InfoWindow({
          content: infoWindowContent,
        })

        window.google.maps.event.addListener(marker, 'click', () => {
          infowindow.open(this.map, marker)
        })
    }
}

注意：类名里的fas对应Solid样式，可根据你使用的图标样式替换（比如fab对应品牌图标、far对应Regular样式）。

方法2：通过Nuxt的Font Awesome模块动态获取类名

如果你使用的是@nuxtjs/font-awesome模块，可以利用组件内的$fa对象动态生成图标类名，更灵活：

watch: {
    events(newEvents, _) {
        let infoWindowContent = ''

        newEvents.forEach((event) => {
            // 动态获取图标对应的类名
            const iconClass = this.$fa.icon('circle').class
            infoWindowContent = infoWindowContent.concat(
            `<div><i class="${iconClass}"></i> 动态生成的图标</div>`
            )
        })

        const infowindow = new window.google.maps.InfoWindow({
          content: infoWindowContent,
        })

        window.google.maps.event.addListener(marker, 'click', () => {
          infowindow.open(this.map, marker)
        })
    }
}

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