vue.js 在nuxt观察者中使用字体真棒图标

xdnvmnnf  于 12个月前  发布在  Vue.js
关注(0)|答案(1)|浏览(130)

在我的nuxt组件中,我知道我可以使用以下内容来显示来自Font Awesome的图标:
<fa icon="circle" />
但是当我在观察器中构建HTML内容时,我需要做什么来使用相同的图标,比如:

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

        newEvents.forEach((event) => {
            infoWindowContent = infoWindowContent.concat(
            `<div><fa icon="circle" /> <-- this doesn't work! </div>`
            )
        }

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

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

nc1teljy

nc1teljy1#

你不能在v-html中使用Vue-Component。
使用

而不是v-html
nuxt 3示例(在ts中使用eslint):

yarn add vue3-runtime-template

nuxt.config.ts

export default defineNuxtConfig({
    hooks: {
        'vite:extendConfig'(config: { resolve: { alias: { vue: string; }; }; }, { isClient }: unknown) {
            if (isClient) {
                config.resolve.alias.vue = 'vue/dist/vue.esm-bundler';
            }
        }
    },
});

在组件中

<template>
    <v-runtime-template
        :template="templateString"/>
</template>

<script lang="ts" setup>

import VRuntimeTemplate from 'vue3-runtime-template';

const templateString = ref('');

watch(
    () => {
        // return something you need to watch
    },
    () {
        templateString.value = templateString.value.concat(
            `<div><fa icon="circle" /></div>`
        );
    }
);

</script>

<script lang="ts">

import Fa from 'where-your-fa-component-located';

export default {
    components: {
        // eslint-disable-next-line vue/no-unused-components
        Fa,
    }
};

</script>

相关问题