Почему Twitter Timeline не загружается в зависимости от переменной в компоненте Vue.js?

Question

Я пытаюсь загрузить временную шкалу Twitter нескольких учетных записей в зависимости от маршрута.Например, если кто-то запрашивает определенную страницу, на странице загружается временная шкала твиттера для конкретной учетной записи.

Я попытался использовать один плагин под названием vue-tweet-embed, но он вообще не работал, поэтому я попробовалстарый способЯ включил твиттер widgets.js в свой основной HTML-файл и попытался включить временную шкалу со статическим кодом, как показано ниже.

Статический код

<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>

Но динамический код не работает.Я проверил с помощью элемента inspect, и разметка, сгенерированная кодом, прекрасно работает.Но это ничего не показывает.Это не загружает временную шкалу твиттера, когда код динамический.

Вот сгенерированная разметка :

<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

Скажите библиотеке JavaScript JavaScript, что нужно перезагрузить ваши виджеты, вызвав twttr.widgets.load () , завернутый в $ nextTick после изменения свойства twitter_handle.

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

с помощью $ nextTick youперед выполнением кода убедитесь, что Vue визуализировал HTML со всеми изменениями.