Привет всем. Подскажите, что не так у меня реализовано? Есть сервис contentful.com, на нём я делаю "content модель" для блога. В ней есть title, text, date и image. Image лежит совершенно в другом запросе и вызывается только после определения id в первом запросе. Но проблема в том, что когда я получаю статьи, они выстраиваются в правильной последовательности, т.е. сначала статья №1, далее статья №2 и в конце статья №3, а вот картинки в зависимости от запроса прилетают в разном порядке, т.е. картинка не соответствует статье.
Вот так я делаю запрос всего этого и вывод, может быть кто-нибудь сталкивался?
<template>
<div class="hello">
<ul>
<li v-for="(post, index) in posts">
<img :src="images[index]" alt="">
<div>
<h3>{{ post.fields.title }}</h3>
<p>{{ post.fields.text }}</p>
<h4>{{ post.fields.date }}</h4>
</div>
</li>
</ul>
</div>
</template>
<script>
import axios from '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>
