Vue.js，未显示嵌入式 facebook 视频

Question

我正在使用 Vue.js 开发网页。

而且这个网站需要显示 Facebook 直播视频。

所以我正在关注 facebook 文档：https://developers.facebook.com/docs/plugins/embedded-video-player#example

这很简单，下面的代码可以正常工作。 此代码与 facebook doc 中编写的代码相同。

<v-layout pt-3>
   <!-- Load Facebook SDK for JavaScript -->
   <div id="fb-root"></div>

   <!-- Your embedded video player code -->
   <div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153231379946729/" data-show-text="false"> 
   </div>
</v-layout>

...

<script>
export default {
    methods: {
        addVideo(url) {
            this.facebookVideoUrl = url;
        }
    }
}
</script>

但是有一个问题。 我想动态更改 Facebook 视频，如下所示。

<v-layout pt-3>
   <!-- Load Facebook SDK for JavaScript -->
   <div id="fb-root"></div>

   <!-- Your embedded video player code -->
   <div class="fb-video" :data-href="videoUrl" data-show-text="false"> 
   </div>
</v-layout>

...

<script>
export default {
    methods: {
        addVideo(url) {
            this.facebookVideoUrl = url;
            FB.XFBML.parse(); // I added this line, but it same...
        }
    }
}
</script>

只有一个文本字段，因此用户可以更改视频 URL。 然后我应该展示新视频。 但它不起作用......

硬编码的“data-href”可以正常工作。 但是当我动态更改它时，它就不起作用了。

我该如何解决这个问题？？？

Answer 1

Facebook 处理该元素并将其替换为他们的嵌入代码。他们不会看到在那之后所做的更改。

您可以致电：

 FB.XFBML.parse();

在更改 data-href 值以告诉 Facebook 再次查找嵌入代码之后。

（文档：https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/）