Twitter 时间轴加载在 Vue 安装的钩子中

Question

我在 Vue 应用程序中加载 Twitter 时间线时遇到问题。时间线在初始页面访问期间会正确加载，但在使用导航或刷新页面后，Twitter 时间线不再显示。

我正在尝试通过挂载的函数加载小部件.js文件：

mounted: function () {
//TWITTER 
window.twttr = (function (d,s,id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
}(document, "script", "twitter-wjs"));
twttr.widgets.load();
}

我正在使用twttr.widgets.load();以便根据此文档动态加载小部件：https://developer.twitter.com/en/docs/twitter-for-websites/javascript-api/guides/scripting-loading-and-initialization。

值得注意的是，我在控制台中收到以下错误，这基本上意味着在调用twttr.widgets.load();小部件时.js文件不可用：

[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'load' of undefined"

有什么提示吗？

Answer 1

你可以在ready()函数中调用load()

twttr.ready(() => twttr.widgets.load());