在 Vue 挂载的钩子中加载 Twitter 时间线答案

【问题标题】：Twitter timeline loading in Vue mounted hook在 Vue 挂载的钩子中加载 Twitter 时间线
【发布时间】：2019-10-25 06:38:33
【问题描述】：

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

我正在尝试通过挂载函数加载 widgets.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(); 时，widgets.js 文件不可用：

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

有什么提示吗？

【问题讨论】：

标签： javascript vue.js twitter

【解决方案1】：

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

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

【讨论】：

谢谢。这在代码中会是什么样子？我应该在挂载的钩子中扩展 Twitter 时间线脚本吗？