How to do the query images in Vue.js?

Hi all. Tell me, what wrong I have done? There is a service contentful.com on it I do a "content model" for the blog. It has a title, text, date and image. Image is a completely different request and is invoked only after determining the id in the first query. But the problem is that when I receive the articles, they are arranged in the correct sequence, i.e. first the article 1, then article 2 and at the end of article 3, but the pictures depending on the request arrive in a different order, i.e. the picture does not match the article.

So I do request all this and the conclusion can be somebody faced?

<template>
 <div class="hello">
the <ul>
 <li v-for="(post, index) in posts">
 <img src="images[index]" alt>
the <div>
 the <h3>{{ post.fields.title }}</h3>
 <p>{{ post.fields.text }}</p>
 <h4>{{ post.fields.date }}</h4>
</div>
</li>
</ul>
</div>
</template>

the <script>
import from axios 'axios';

export default {
 name: 'hello',
 data() {
 return {
 posts: [],
 images: [],
};
},
 methods: {
 fetchData() {
 axios.get('https://cdn.contentful.com/spaces/5638qkywlebj/entries?access_token=4b0a64fd67c5c05a56514c5f546494913079cd1691d996ccc30228cd8c3a8d78').then((response) => {
 this.posts = response.data.items;
 this.posts.forEach((post) => {
 const imageId = post.fields.image.sys.id;
 /* eslint-disable */
 axios.get(`https://cdn.contentful.com/spaces/5638qkywlebj/assets/${imageId}?access_token=4b0a64fd67c5c05a56514c5f546494913079cd1691d996ccc30228cd8c3a8d78`).then((response) => {
 /* eslint-enable */
this.images.push(response.data.fields.file.url);
 }).catch((error) => {
console.log(error);
});
});
console.log(this.images);
 }).catch((error) => {
console.log(error);
});
},
},
 created() {
this.fetchData();
},
};
</script>
June 14th 19 at 19:18
2 answers
June 14th 19 at 19:20
Solution
const imageId = post.fields.image.sys.id

Th-then no one post there image.

And so it is possible to make images the object, respectively, in the enumeration of positions to pay attention to their index (.forEach((post)) on the model .forEach((post, i))), while maintaining the image url and use it (this.images.push model for this.images[i] =).

UPD. Oh, the pictures appeared. Set URLs better something like this:
this.$set(this.images, i, response.data.fields.file.url);
, sory I was trying to do, and completely forgot that people can watch. Thank you very much for the reply. Now I will try ) - gennaro.Heidenreich commented on June 14th 19 at 19:23
that all turned out. Thank you very much. - gennaro.Heidenreich commented on June 14th 19 at 19:26
June 14th 19 at 19:22
What prevents to throw images on index post and all?
so after I do so - gennaro.Heidenreich commented on June 14th 19 at 19:25
, well, no.
below, Vaughn said. - gennaro.Heidenreich commented on June 14th 19 at 19:28
thanks for the reply! - gennaro.Heidenreich commented on June 14th 19 at 19:31

Find more questions by tags Vue.js