Javascript 为什么Twitter Timeline没有基于Vue.js组件中的变量加载？

我正在尝试根据路线加载多个帐户的twitter时间线。例如，如果有人请求某个特定页面，则该页面上会加载特定帐户的twitter时间线

我尝试使用一个名为

vue-tweet-embed

的插件，但它根本不起作用，所以我尝试了旧方法。我在主HTML文件中包含了twitter的

widgets.js

，并尝试使用静态代码包含时间线，如下所示

静态代码

<a class="twitter-timeline" href="https://twitter.com/Google?ref_src=twsrc%5Etfw">Tweets by Google</a>

<a class="twitter-timeline" data-height="500px" v-if="isLoading===false" :href="'https://twitter.com/'+service.twitter_handle+'?ref_src=twsrc%5Etfw'"></a>

现在，我想根据变量显示多个帐户的Twitter时间线。我的变量是一个对象的属性，因此，下面是我尝试使用的代码。请注意，上面给出的静态代码即使在Vue组件中也能工作

动态代码

<a class="twitter-timeline" href="https://twitter.com/Google?ref_src=twsrc%5Etfw">Tweets by Google</a>

<a class="twitter-timeline" data-height="500px" v-if="isLoading===false" :href="'https://twitter.com/'+service.twitter_handle+'?ref_src=twsrc%5Etfw'"></a>

但动态的一个不起作用。我使用inspect元素进行了检查，代码生成的标记非常好。但它什么也没表现出来。当代码是动态的时，它不会加载twitter时间线

以下是生成的标记：

<div class="card-body">
    <a data-height="500px" href="https://twitter.com/Google?ref_src=twsrc%5Etfw" class="twitter-timeline"></a>
</div>

---

我不知道出了什么问题，从最近3个小时开始尝试解决这个问题，但似乎没有任何效果。

告诉Twitter JavaScript库在更改Twitter\u handle属性后通过调用wrapped in$nextTick重新加载您的小部件

$nextTick(function () { twttr.widgets.load(); });

---

使用$nextTick，您可以确保Vue在执行代码之前呈现了包含所有更改的HTML。

您可以共享生成的标记吗？@adiga，给您->1。我确保服务对象和twitter_handle属性是被动的，并且在href属性中插入了正确的url。100%2. 在确保服务对象和Twitter_句柄首先被加载以创建所需的标记后，立即尝试告诉twitterjavascript库使用“twttr.widgets.load（）”重新加载小部件。但它仍然不起作用。好吧，然后尝试按如下方式重新加载twitter小部件

$nextTick（function（）{twttr.widgets.load（））

更改twitter\u handle属性后。如果仍然不起作用，您可以尝试将url绑定为a标记的键，以便在每次url更改时创建新标记：

。尝试将此更改与重新加载小部件相结合。我很高兴能提供帮助。我相应地更新了答案。