vue3 - 无法呈现 Facebook 评论

Question

我正在尝试将 Facebook cmets 插件 (check it here) 添加到我的 vue 应用程序中，问题是 div 是在 DOM 中创建的，但有时会显示，有时不显示（宽度：0，高度 0）

注意：我正在调用 XFBML.parse 函数，我的主机被添加到 fb 应用程序

这是我当前的代码：

<template>
    <div
        ref="commentContainer"
        class="fb-comments"
        :data-href="onUrl()"
        :data-width="cwidth"
        :data-numposts="numposts"
    ></div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, watch } from "vue";
import router from "../../router";
export default defineComponent({
    props: {
        cwidth: {
            type: String,
            default: "100%",
        },
        numposts: {
            type: String,
            default: "2",
        },
    },
    setup({ cwidth, numposts }) {
        const commentContainer = ref(null);
        const init = () => {
            if (
                window.FB &&
                !commentContainer.value.hasAttribute("fb-xfbml-state")
            ) {
                setTimeout(() => {
                    window.FB.XFBML.parse(commentContainer.value.parentElement);
                }, 2000);
            }
        };
        onMounted(() => {
            setTimeout(() => {
                init();
            }, 1500);
        });
        const onUrl = () => {
            return document.location.origin + document.location.pathname;
        };

        watch(
            () => router.currentRoute.value,
            () => {
                init();
            }
        );

        return { cwidth, numposts, commentContainer, onUrl };
    },
});
</script>

Answer 1

不要使用setTimeout，而是尝试使用nextTick，并且不要将任何参数传递给解析函数。

例如在挂载函数中

this.$nextTick(() => {
    window.FB.XFBML.parse()
  })

你在运行 init() 之前等待 1.5 秒是有原因的吗？

以上使用 Vue2 工作，Vue3 示例见下：

import { createApp, nextTick } from 'vue'

const app = createApp({
  setup() {
    const init = async () => {
      await nextTick()
      window.FB.XFBML.parse()
    }
  }
})

https://v3.vuejs.org/api/global-api.html#nexttick

另外，请确保您已添加 SDK 脚本并将 fb-root div 提供给您的 index.html。除非我在结束 </body> 标记之前添加这些，否则它对我的不起作用。

我还必须将 nextTick 代码添加到路由观察器，以在导航到新页面时强制窗口再次解析 FB。我不确定 Vue 3 版本，但我相信你可以从这个例子中弄清楚：

watch: {
    $route (to, from) {
      if (to.fullPath !== from.fullPath) {
        this.$nextTick(() => {
          window.FB.XFBML.parse()
        })
      }
    }
  }