Почему мои динамически отображаемые посты Instagram загружаются, в то время как жесткие кодируемые делают в Vue? ⇐ Html

[Anonymous]

Я хотел отобразить несколько сообщений в Instagram, удерживая их идентификаторы в массиве, чтобы позже просто связать требуемый URL в код Embed, предоставленный самим Instagram. Проблема в том, что я обнаружил, что пост/изображения на самом деле не загружаются при попытке динамически их отобрать, но они загружаются хорошо при жесткости.
Я попытался убедиться Данные моего компонента заполняются правильно в разных точках своего жизненного цикла, но, кажется, ничего не работает. Я считаю, что проблема как -то связана с привязкой атрибута в фактическом HTML, но я не могу понять, как его обойти. Любая помощь была бы очень оценена !!



View this post on Instagram A post shared by Stephania (@stephania_girlcat)





v-bind:posts="posts"
v-bind:key="post.id">
{{ post.url }}

View this post on Instagram A post shared by @divadelbloque








export default {
components: {
// InstagramEmbed,
},
beforeCreate()
{
},
created()
{
console.log('created');
console.log('this.posts:: ', JSON.stringify(this.posts));
for(let i in this.posts)
{
this.posts.url = this.linkStart + this.posts.id + this.linkEnd;
}
},
beforeMount()
{
},
mounted() {
console.log('mounted');
console.log('this.posts:: ', JSON.stringify(this.posts));

let igscript = document.createElement('script')
igscript.setAttribute('src', 'https://www.instagram.com/embed.js')
document.head.appendChild(igscript)

// this.$forceUpdate();
},
data()
{
return {
linkStart: 'https://www.instagram.com/p/',
linkEnd: '/?utm_source=ig_embed&utm_campaign=loading',
posts: [{id: 'DDEZ59hIM55', url: ''}, {id: 'DDEZ59hIM55', url: ''}],
}
},
};





Подробнее здесь: https://stackoverflow.com/questions/794 ... coded-ones