Возникает проблема с рендерингом.
У меня есть компонент, внутри которого есть ещё один.
A.vue:
<template>
<v-app
class="custom-app custom-debug"
style="background-color: #ffffff;"
>
<B
v-show="!loading"
:cl="class_"
/>
</v-app>
</template>
<script>
import B from "../components/blocks/B";
export default {
name: 'A',
components: { B },
async created() {
this.loading = true;
this.blocks = await this.$store.dispatch('getBlocks');
this.loading = false;
},
data: () => ( {
class_: null,
loading: true;
} ),
};
</script>
B.vue:
<template>
<v-btn>
<v-progress-circular
:value="100 * cl.solved_blocks / cl.amount_blocks"
/>
</v-btn>
</template>
<script>
export default {
props: ['cl']
},
}
</script>
Как Вы можете видеть, я выставляю флажок loading = false
, который должен блокировать показ (рендеринг компонента) до того момента, пока не загрузятся данные из vuex. При этом, во vuex выполняются две вложенные асинхронные функции (сейчас они замоканы и там просто стоит таймаут на 500мс). При этом, в консоле браузера, я вижу следующее:
found in
—-> <B> at src/components/blocks/B.vue
<VApp>
<Class> at src/views/A.vue
<VContent>
<App> at src/App.vue
<Root>```
Иными словами, рендеринг всё-таки происходит, потому как движок **JS** добрался до `solved_blocks`, который используется внутри `B.vue`