为什么基于在Vue.js组件变量的Twitter时间轴没有得到加载？

Question

我试图加载基于路线上的多个账户的Twitter的时间表。例如，如果有人请求一个特定的页面，特定帐户的Twitter时间线被加载到页面上。

我试图用一个插件叫做vue-tweet-embed但它不是在所有的工作，所以，我尝试了老样子。我包括Twitter的在我的主HTML文件widgets.js并试图包括静态代码如下给出时间表。

静态代码

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

现在，我想说明基于变量多个账户的Twitter的时间表。我的变量是一个对象的属性，所以，这是我想使用的代码。请注意，上面给出的静态代码的工作，即使在Vue公司的组成部分。

动态代码

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

但动态的不工作。我检查与检查元件和被生成的标记由所述代码是完全没有问题。但它是深藏不露。当代码是动态的，它不加载Twitter的时间表。

下面是生成的标记：

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

我不知道什么是错的，试图解决这个问题，因为近3个小时，但似乎没有任何工作。

Answer 1

告诉Twitter的JavaScript库调用包在$ nextTick twttr.widgets.load()改变twitter_handle属性后，重新加载您的小部件。

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

随着$ nextTick您确保Vue公司呈现的HTML与执行代码之前的所有更改。