我基于vue和ant-design-vue编写了一个导航组件，其 LectureNavigation.vue 文件内容如下：

<template>
    <div id="navigation-button">
        <a-button type="primary" style="width: 62px;
                 height: 40px;" @click="toggleCollapsed">
            <MenuUnfoldOutlined v-if="collapsed" />
            <MenuFoldOutlined v-else />
        </a-button>
    </div>
    <div id="expand">
        <a-layout-sider width="220px" style="background: #fff">
            <a-menu mode="inline" theme="dark" :inline-collapsed="collapsed" v-model:openKeys="openKeys">
                <a-menu-item v-for="(item, index) in get_lecture_index()" :key="item[0]">
                    <template #icon>
                        <MailOutlined />
                    </template>
                    <router-link :to="'/lecture/' + item[1]">{{index}} -{{ item[2] }}</router-link>
                </a-menu-item>

            </a-menu>
        </a-layout-sider>
    </div>

</template>

<script>
import { stat_instance } from "@/utils/request";
import router from "@/router/index";
import { defineComponent, reactive, toRefs, watch, onMounted } from "vue";
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    // PieChartOutlined,
    MailOutlined,
    // DesktopOutlined,
    // InboxOutlined,
    // AppstoreOutlined,
} from "@ant-design/icons-vue";


export default defineComponent({

    data() {
        return {
            $router: router,
            lecture_index: [
                ["0", "lks", "中华小当家"],
                ["1", "lks", "中华小当家"],
                ["2", "fefe", "美美睡一觉"]],
        };
    },

    methods: {
        get_lecture_index() {
            return this.lecture_index;
        }
    },

    created() {
        stat_instance({
            url: "/stat_api/get_lecture_index",
        })
            .then((response) => {
                this.lecture_index = response.data.detail);
                console.log("lecture_index: ", response);
                console.log("lecture_index: ", this.lecture_index);
            })
            .catch(() => {
                console.log("### Failed to request navigation file.");
            });
    },

    components: {
        // PieChartOutlined,
        MailOutlined,
        MenuUnfoldOutlined,
        MenuFoldOutlined,
        // DesktopOutlined,
        // InboxOutlined,
        // AppstoreOutlined,
    },
});
</script>

<style lang="less">

#navigation-button {
    z-index: 20;
    display: block;
    position: fixed;
    top: 10px;
    left: 9px;
}

#expand {
    z-index: 9;
    position: static;
    width: 200;
}

@media screen and (max-width: 800px) {
    #expand {
        position: fixed;
        display: none;
    }
}

@media screen and (min-width: 801px) {
    #navigation-button {
        display: none;
    }
}
</style>

但是网页只能渲染出 data 方法中的 lecture_index ，而该 lecture_index 只包含了3个项目，就像上面的代码一样。 created 方法中一个http请求无法渲染响应数据，这个数组里包含了8个项目。

执行的时候chrome报错：

Uncaught (in promise) DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

整个项目如下 Jionlp_online ，部署这个项目的时候输入 http://ip:port/lecture/entropy_theory_basics 就可以看到这个错误页面。

那么，如何才能让3个以上的http请求成功渲染数据呢？