У меня есть Vue-компонент для запроса результатов поиска (предложений) из веб-службы с использованием запросов axios.На каждого провайдера (до 10) я делаю один запрос и отправляю результат, если он доступен, для свойства данных «offer».
Я хочу, чтобы пользователь видел данные обновленными в реальном времени.
EveryКогда я помещаю результат в свойство «предложения», он должен отображать список предложений.
Пока все работает нормально, но проблема в том, что все изображения не отображались во время выполнения.Похоже, v-bind: src будет отображаться только после окончания времени выполнения.Таким образом, пользователь видит изображения (логотипы) только после окончания процесса.
Я уже тестировал загрузку изображений с помощью include.Как и стиль.К сожалению, ничего не работает.Изображения будут отображаться после выполнения.
Кто-нибудь имеет опыт работы с этим?
Мои предложенияКомпонент:
<template>
<div>
<progress-component v-bind:progress="progress"></progress-component>
<div v-for="offer in sortedOffers">
<offer-component v-bind:offer="offer"></offer-component>
</div>
</div>
</template>
<script>
export default {
props: ['productId'],
data: function () {
return {
providersCount: 0,
providers: [],
offers: []
}
},
created: function () {
let self = this;
axios.get('/providers/sellers').then(function (response) {
self.providers = response.data;
self.providersCount = self.providers.length;
self.renderOffers();
}).catch(function (error) {
//
})
},
methods: {
renderOffers: function () {
for (let i = 0; i < this.providers.length; i++) {
this.getOffer(this.providers[i].id, this.productId);
}
},
getOffer: function (providerId, productId) {
let self = this;
axios.post('/offers', {'provider': providerId, 'product': productId}).then(function (response) {
if (response.data.success === 'true') {
self.offers.push(response.data);
}
}).catch(function (error) {
//
}).then(function () {
self.providers.splice(self.providers.length - 1, 1);
});
}
},
computed: {
sortedOffers() {
return _.orderBy(this.offers, 'total', 'asc');
},
progress() {
return (this.providersCount - this.providers.length) / this.providersCount * 100;
}
}
}
</script>
<style scoped>
</style>
И предложениеКомпонент:
<template>
<article class="itemlist">
<div class="row row-sm">
<aside class="col-sm-3">
<img v-bind:src="offer.provider.logo_url"
v-bind:alt="offer.provider.name"
height="35px">
</aside>
</div>
</article>
</template>
<script>
export default {
props: {
offer: Object
}
}
</script>
<style scoped>
</style>