Vue可折叠菜单，当前页面已展开

Question

我已经创建了一个可折叠儿童导航菜单，如果默认情况下它们在数据内被展开，我可以进行更改。

出于演示目的，我添加了一些虚拟数据，但是通常这些数据来自数据库。

现在让我说我目前在收藏夹页面上，我该如何扩展所有父菜单，它们唯一能想到的就是在每个实例上循环TreeMenu组件以检查是否有任何子项与当前链接匹配。

很明显，我传入了TreeMenu current 的所有实例，该实例是当前页面的字符串，这将与页面链接匹配。

<template>

    <ul class="menu-list">
        <transition-group name="fade">
            <li v-for="page in pages" v-if="page.display" :key="page.id">
                <i :class="[{ active: page.expanded }, isExpanded(page.expanded)]" v-if="nodes[page.id]" @click="page.expanded = !page.expanded"></i><a :href="'/docs/' + page.link">{{ page.title }} <i :class="page.icon"></i></a>

                <transition name="fade">
                    <tree-menu v-if="page.expanded && nodes[page.id]" :data="nodes" :page-id="page.id" :key="'sub'+page.id" :canedit-prop="canedit" :current="page.link"></tree-menu>
                </transition>
            </li>
        </transition-group>
        <li v-if="canedit" class="add-new"><a :href="[ '/docs', current, 'add' ].filter(Boolean).join('/')">Add New <i class="far fa-plus-circle"></i></a></li>
    </ul>

</template>
<script>

    import Axios from 'axios';

    export default {
        props: {
            data: {},
            ajax: {},
            token: {},
            pageId: {},
            current: {},
            caneditProp: {},
            expandIcon: {
                default: 'fal fa-plus-square',
                type: String
            },
            collapseIcon: {
                default: 'fas fa-minus-square',
                type: String
            }
        },
        data() {
            return {
                nodes: {},
                pages: {},
                canedit: this.caneditProp
            }
        },
        created() {
            const self = this;

            // Tempt debugging
            let data = JSON.parse('{"1":[{"display":1,"expanded":0,"icon":"fas fa-file-video","id":2,"link":"web-vue-video-frame","order":0,"parent_id":1,"title":"Video Frame"},{"display":1,"expanded":0,"icon":"fas fa-heart","id":4,"link":"web-vue-favourites","order":1,"parent_id":1,"title":"Favourites"}],"5":[{"display":1,"expanded":0,"icon":"fas fa-heart","id":6,"link":"web-feature-favourites","order":0,"parent_id":5,"title":"Favourites"}],"4":[{"display":1,"expanded":0,"icon":"","id":7,"link":"web-vue-favourites-panel","order":1,"parent_id":4,"title":"Panel"}],"root":[{"display":1,"expanded":0,"icon":"","id":3,"link":"web-home","order":0,"parent_id":null,"title":"Home"},{"display":1,"expanded":0,"icon":"fab fa-vuejs","id":1,"link":"web-vue-home","order":1,"parent_id":null,"title":"Vue Components"},{"display":1,"expanded":0,"icon":"","id":5,"link":"web-features-home","order":2,"parent_id":null,"title":"Features"}],"canedit":true}');

            this.nodes = data;
            this.pages = data.root;
            this.canedit = data.canedit;

            // Temporarily disable
            if (!this.data && false) {
                Axios.get(this.ajax, {
                    params: {
                        '_token': this.token
                    }
                })
                .then(function(response) {
                    self.nodes = response.data;
                    self.pages = response.data.root;
                    self.canedit = response.data.canedit;
                });
            }
            else {
                this.pages = this.data[this.pageId];
                this.nodes = this.data;
            }
        },
        methods: {
            isExpanded: function(value) {
                if (value) {
                    return this.collapseIcon;
                }
                return this.expandIcon;
            }
        }
    }
</script>