从v-for中呈现的另一个组件更改组件状态

Question

我有一个v-for呈现的成分列表。当其他组件之一设置为true时，我想将“ show”布尔属性设置为false： 为简化起见，我仅添加两个组件

主要组件代码：

<template>
    <aside class="main-sidebar">
        <section class="sidebar">
            <ul class="sidebar-menu" data-widget="tree">
                <nav-bar-user-profile-item></nav-bar-user-profile-item>
                <nav-bar-item></nav-bar-item>
                <nav-bar-item></nav-bar-item>
            </ul>
        </section>
    </aside>
</template>

<script>
import NavBarUserProfileItem from '@/components/NavBar/NavBarUserProfileItem';
import NavBarItem from '@/components/NavBar/NavBarItem';

export default {
    name: 'NavBar',
    components: {
        NavBarUserProfileItem,
        NavBarItem
    },
    methods: {
        MenuHasBeenToggled(event) {
            console.log(event);
        }
    }
}

NavBarItemComponent

<template>
    <li class="treeview2 item" :class="{'menu-open': isOpen, 'active': menu.active}" @click="ToggleState">
        <a href="#">
            <i class="fa fa-th"></i>
            <span>{{ menu.title }}</span>
            <span class="pull-right-container">
                <i class="fa fa-angle-right pull-right"></i>
            </span>
        </a>
        <collapse-transition>
            <ul class="treeview-menu" v-show="isOpen">
                <li v-for="submenu in menu.submenus" :key="submenu.title" :class="{'active': (('active' in submenu) ? submenu.active : false)}">
                    <b-link :href="submenu.link">
                        <i class="fa fa-circle-thin"></i>
                        {{ submenu.title }}
                    </b-link>
                </li>
            </ul>
        </collapse-transition>
    </li>
</template>

<script>

    export default {
        name: 'NavBarItem',
        data: function () {
            return {
                isOpen: false
            }
        },
        computed: {

        },
        methods: {
            ToggleState() {
                this.isOpen = !this.isOpen;
                this.$emit("toggle-state");
            }
        },
        props: {
            menu: {
                type: Object,
                default: function() {
                    return {
                        link: "#",
                        title: "Main menu",
                        active: true,
                        submenus: [
                            {
                                link: "#",
                                title: "Submenu 1",
                            },
                            {
                                link: "#",
                                title: "Submenu 2",
                                active: true
                            },
                            {
                                link: "#",
                                title: "Submenu 3",
                            },
                        ]
                    }
                }
            }
        }
    }
</script>

<style scoped>

</style>

目标是单击之一并显示菜单内容，同时折叠其他组件。

我考虑过使用一个变量数组，并将其绑定到“ show”道具，并通过一个事件监听它，并将除发送事件的组件之外的每个变量设置为false。

我怎么知道该事件发送了什么？

关于如何完成此任务的更好的主意吗？

Answer 1

我认为，最好的方法是为每个NavBarItem添加一个uniuque标识符属性，并为选定的NavBarItem添加一个属性。然后，在主组件中，您可以单击NavBarItem设置选定的NavBarItem，如果当前的NavBarItem标识符等于单击的NavBarItem，则在NavBarItem中进行isOpen计算。像这样：

<template>
    <aside class="main-sidebar">
        <section class="sidebar">
            <ul class="sidebar-menu" data-widget="tree">
                <nav-bar-user-profile-item></nav-bar-user-profile-item>
                <nav-bar-item item-id="1" :selected-item-id="selectedNavbarItemId" @click="selectedNavBarItemId = 1"></nav-bar-item>
                <nav-bar-item item-id="2" :selected-item-id="selectedNavbarItemId" @click="selectedNavBarItemId = 2"></nav-bar-item>
            </ul>
        </section>
    </aside>
</template>

<script>
import NavBarUserProfileItem from '@/components/NavBar/NavBarUserProfileItem';
import NavBarItem from '@/components/NavBar/NavBarItem';

export default {
    name: 'NavBar',
    components: {
        NavBarUserProfileItem,
        NavBarItem
    },
    data: function(){
        return {
             selectedNavBarItemId: 0
        }
    },
    methods: {
        MenuHasBeenToggled(event) {
            console.log(event);
        }
    }
}

在NavBarItem中

<template>
    <li class="treeview2 item" :class="{'menu-open': isOpen, 'active': menu.active}" @click="ToggleState">
        <a href="#">
            <i class="fa fa-th"></i>
            <span>{{ menu.title }}</span>
            <span class="pull-right-container">
                <i class="fa fa-angle-right pull-right"></i>
            </span>
        </a>
        <collapse-transition>
            <ul class="treeview-menu" v-show="isOpen">
                <li v-for="submenu in menu.submenus" :key="submenu.title" :class="{'active': (('active' in submenu) ? submenu.active : false)}">
                    <b-link :href="submenu.link">
                        <i class="fa fa-circle-thin"></i>
                        {{ submenu.title }}
                    </b-link>
                </li>
            </ul>
        </collapse-transition>
    </li>
</template>

<script>

    export default {
        name: 'NavBarItem',
        data: function () {
            return {

            }
        },
        computed: {
           isOpen:function(){
               return itemId == selectedItemId;
           }
        },
        methods: {

        },
        props: {
            itemId:Number,
            selectedItemId:Number,
            menu: {
                type: Object,
                default: function() {
                    return {
                        link: "#",
                        title: "Main menu",
                        active: true,
                        submenus: [
                            {
                                link: "#",
                                title: "Submenu 1",
                            },
                            {
                                link: "#",
                                title: "Submenu 2",
                                active: true
                            },
                            {
                                link: "#",
                                title: "Submenu 3",
                            },
                        ]
                    }
                }
            }
        }
    }
</script>

<style scoped>

</style>