Vue中创建Facebook点赞框组件时遇到错误

这里是整理好的单文件组件代码，格式更清晰易读：

<template>
  <div>
    <div v-html="fbSdk"></div>
    <div v-if="facebookPage" class="fb-page" 
         :data-href="facebookPage" 
         data-hide-cover="false" 
         data-show-facepile="true">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fbSdk: `
        <div id="fb-root"></div>
        <script>
          (function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            // 记得补全你的Facebook SDK初始化逻辑哦
          }(document, 'script', 'facebook-jssdk'));
        </script>
      `,
      facebookPage: '' // 这里需要填入你的Facebook页面链接，也可以通过props从父组件传入
    }
  }
}
</script>

另外给你两个关键的小提醒：

• Vue的v-html指令默认不会解析执行其中的<script>标签，所以你当前通过fbSdk插入的Facebook SDK脚本大概率无法正常运行。更稳妥的做法是把SDK加载逻辑放到组件的mounted钩子中，动态创建script标签插入到页面里。
• 确保facebookPage这个数据属性有正确的取值，要么在data里设置默认的页面URL，要么通过组件props传入，否则v-if会一直不生效，点赞框不会显示。

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