Question

在将数据呈现到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");

现在，当我输出它时，它显示为null。但是，在父组件中，如果将v-if="dataReady"移动到parentDiv容器内，则它将显示parentDiv元素。

因此，这表明呈现子组件时，parentDiv尚未在DOM上。这似乎有点奇怪，因为我在等待数据准备就绪之后才显示此组件。

我在这里缺少明显的东西吗？为什么该组件在我当前的设置中无法访问parentDiv？有没有更好的方法等待数据处理以将其传递给孩子？

谢谢

如何将元素呈现到DOM

0 个答案: