Vue + Font Awesome SVG 有时会渲染两次图标并给出 JS 错误答案

【问题标题】：Vue + Font awesome SVG sometimes renders icons twice and gives JS errorVue + Font Awesome SVG 有时会渲染两次图标并给出 JS 错误
【发布时间】：2023-03-19 20:00:01
【问题描述】：

这是 Vue 应用程序中 Font Awesome 5 图标（SVG 版本）的一个奇怪问题。我已经在一个新的最小 Vue 应用程序中复制了这个：

https://www.dropbox.com/s/9xf0bim26lzsp7x/hello-world.tgz?dl=0

可以使用 `npm run serve' 在本地运行并在以下位置访问 http://localhost:8080/#/detail/123

一个视图有一个很棒的字体图标和一些标记：

<template>
    <div>

        <div class="text-center">
            item.id {{item.id}}
            <p v-if="item.status == 'New'">Please confirm your appointment:</p>
            <!-- class="fas fa-user"  not useful. Sometimes icons are mess up. -->
            <p>{{item.practitioner_name}}</p>

            <p><i class="fas fa-map-marked-alt"></i> <a
                    :href="item.address_map_href"
                    target="_blank"
                >{{item.address.address1}} </a>
                <span v-if="item.address.address2">; </span>
                {{item.address.address2}}
            </p>

            <p>
                {{item.day}}<br>
            </p>

            <div v-if="item.status == 'New'">
                <button
                    variant="primary"
                    @click="itemConfirm()"
                    class="w-md"
                ><i class="fas fa-check"></i> Confirm</button>
                <br><br>

            </div>

        </div>

    </div>
</template>

<script>


export default {
    props: ['id'],
    components: {
    },
    data: () => ({
        item: {
            address: {} //avoid error on render
        }
    }),

    async mounted() {
        // eslint-disable-next-line no-console
        console.log("sadf")
        if (this.id && this.id != '0') {

            this.item = {
                "id": "mkt7y3v0m5vupnal",
                "practitioner_id": "yyie5csyc0y1lwcg",
                "day": "2019-11-08",
                "start_time": "16:00",
                "end_time": "16:45",
                "status": "New",
                "practitioner_name": "Dr",
                address: {}
            }
        }

    },

    methods: {

        itemConfirm() {

            this.item.status = 'Confirmed'

        },

    }

}

</script>

点击确认后的结果：

观察

svg 标记在 DOM 中出现两次（请参阅屏幕截图中的浏览器检查器）
Font Awesome js 在 index.html 中加载 <script defer src="https://kit.fontawesome.com/mykit.js" crossorigin="anonymous"></script>
移除 Font Awesome 解决了重复标记显示和 JS 错误

继续使用 Font Awesome 的解决方案是什么？

JS 错误：

vue.esm.js?a026:628 [Vue warn]: Error in nextTick: "NotFoundError: Failed to execute 'insertBefore' on 'Node': 要插入新节点的节点不是子节点这个节点的。”

itemConfirm@RecordDetail.vue?f97b:145

点击@RecordDetail.vue?e784:50

invokeWithErrorHandling@vue.esm.js?a026:1863

调用者@vue.esm.js?a026:2184

original._wrapper@vue.esm.js?a026:7559

vue.esm.js?a026:1897 DOMException: Failed to execute 'insertBefore' on 'Node': 要插入新节点的节点不是该节点的子节点。

我的代码中没有 nextTick() 函数。我不使用 v-for （将其视为另一个原因）。

【问题讨论】：

您能否发布您的 Vue HTML 的完整标记/渲染以及您用来补充该渲染的代码？
发布完整的 Vue 组件。对我来说看起来像一个模板错误。您可能正在循环空数据，这就是为什么您会看到两组图标？
我注意到您已经注释掉了 item.data 变量中的 status 属性。这就是代码行v-if="item.status == 'New'" 出错的原因。您能否删除对该属性的评论，看看它是如何进行的。在我看来，您正在处理多个错误，应该首先解决。
谢谢@Angelo，我已经试过了，它没有效果，这就是我评论它的原因。 status 作为从服务器加载的数据的属性存在。

标签： vue.js font-awesome

【解决方案1】：

Font Awesome SVG 和 Vue 似乎存在一个已知问题。他们不使用 js 包，而是推荐 vue-fontawesome 插件，或者使用 CSS 包。但是，很难发现这一点，因为这种行为很奇怪。

【讨论】：