Парни начал разбираться с vue. И возникла проблема на ровном

Question

Парни начал разбираться с vue. И возникла проблема на ровном

месте.
Есть компонент, в котором через v-for вызывается другой компонент.

Данные храню в vuex, с помощью vuex-persistent. Есть массив order, в котором в нужном порядке лежат ключи, есть объект blocks. Ключи и объекты в blocks добавляются через Vue.set, чтобы придать параметрам объекта реактивности.

v-for итерируется через массив order, а компоненту передаются данные из blocks по ключу, полученному из order.

<template>
<ul class="blocks-list">
<block v-for="id in order" :block="blocks[id]" :key="id"></block>
</ul>
</template>

При первом старте order и blocks пустые. Делаю запрос к серверу для получения order(быстрый, примерно 120-150мс) и как только получаю ответ и заполняю состояние, то делаю запрос за данными blocks(долгий, около 2 секунд). После заполнения order начинают отрисовываться компоненты через v-for, но валится ошибка, что данных в blocks на указанный ключ нет. В этот момент данные для blocks пришли и заполнился объект. Но все уже сломано и ничего не приходит.

Сделал через v-for с v-if, но тоже ничего не отрисовывается при первом старте, когда order и blocks пустые. Тот же самый процесс. Но я ожидаю, что как только появилисб данные по ключу в blocks, то должно отрисовать, но ничего, совсем ничего 😞

<template>
<ul class="blocks-list">
<block v-for="id in order" v-if="!!blocks[id] && Object.keys(blocks[id]).length > 0" :block="blocks[id]" :key="id"></block>
</ul>
</template>

blocks заполняется через Vue.set. То есть он "реактивный". И в консоли при ковырянии в нем я вижу геттеры и сеттеры с reactiveGetter и reactiveSetter

При перезагрузке страницы - все рендерится как надо, т.к. данные vuex-persistent восстанавливает и собственно есть что рисовать.

Вопрос: как правильно делать в ситуации, когда итерирование делается по одному массиву, а данные берутся из другого объекта, объект реактивный и заполняется после того как происходит первый рендеринг?

#frontend #javascript #programming #russian #vue.js

0

21.06.2017

1 ответов

10 просмотров

Александр Парамонов · Accepted Answer

Александр Парамонов

передай props ом в

0

21.06.2017

169 похожих чатов

Парни начал разбираться с vue. И возникла проблема на ровном

1 ответов

Похожие вопросы