Как элементы отображаются в DOM - PullRequest
Новая
       10

Как элементы отображаются в DOM

0 голосов
/ 09 февраля 2019

У меня небольшая проблема с пониманием, когда данные отображаются в DOM.У меня есть простой компонент, подобный так. 

<template>
    <div>
        <div class="row" v-if="dataReady">
            <div class="col-12" id="parentDiv">
                <somecomponent :some-data = "someData"></somecomponent>
            </div>
        </div>
    </div>
</template>

<script>
    import * as d3 from 'd3';
    import SomeComponent from '../components/SomeComponent';

    export default {
        components: {
            'somecomponent': SomeComponent
        },
        data() {
            return {
                someData: [],
                dataReady: false
            }
        },
        methods: {

        },
        created() {
            let vm = this;

            let url = `/api/something/${this.$route.params.id}`;
            axios.get(url)
                .then(response => {
                    return d3.json(`/${response.data.file_path}`);
                }).then(data => {
                    vm.someData = data[0];

                    vm.dataReady = true;
                }).catch(err => {
                    console.log(err)
                });
        }
    }
</script>

Так что, когда вы нажимаете этот компонент, он загружает файл.Этот файл затем обрабатывается и устанавливается в переменную someData.Эти данные затем отправляются дочернему компоненту somecomponent.Я использую переменную dataReady, чтобы определить, когда нормально загружать дочерний компонент, как только данные готовы.

Теперь внутри дочернего компонента, в созданном хуке, я вызываю функцию.Внутри этой функции у меня есть эта строка 

let parentDiv = document.getElementById("parentDiv");

Теперь это отображается как ноль, когда я вывожу его.Однако в родительском компоненте, если я переместлю v-if="dataReady" внутри контейнера parentDiv, то он покажет элемент parentDiv.

Так что можно предположить, что когда рендерится дочерний компонент, parentDiv еще не находится в DOM,Это кажется немного странным, поскольку я жду, пока данные будут готовы, прежде чем отобразить этот компонент.

Я что-то упускаю здесь из-за чего-то очевидного?Почему компонент не имеет доступа к parentDiv с моей текущей настройкой?Есть ли лучший способ ожидания обработки данных, чтобы передать их ребенку?

Спасибо

...