Question

我从vuejs开始，我尝试创建一个带有子菜单，子子菜单等的按钮菜单组件。

当我单击按钮时，显示子按钮，或者如果已经显示则隐藏。在子按钮上，行为是相同的。我的问题是，当显示子子按钮时，我单击按钮：子按钮按预期隐藏。接下来，我再次单击，将显示子按钮，但子子按钮也将显示！

这里有一个小模式：

Menu -> Menu    -> Menu    -> Menu -> Menu
        Submenu    Submenu            Submenu
                   SubSubMenu         Subsubmenu

但是我会：

Menu -> Menu    -> Menu    -> Menu -> Menu
        Submenu    Submenu            Submenu
                   SubSubMenu

代码在这里：

<template>
    <li class="nav-item nav-item-text mr-2">
        <a
            class="nav-link"
            v-bind:class="{withChildren: menu.children && menu.children.length }"
            v-on:click="switchDisplayChildren"
            href="#"
        >{{ menu.text }}</a>
        <ul 
            v-if="menu.children && menu.children.length"
            v-bind:class="{'dropdown-menu-hide': !displayChildren, 'dropdown-menu-show': displayChildren }"
        >
            <navbar-button v-for="child in menu.children" :key="child.id" :menu="child"></navbar-button>
        </ul>
    </li>
</template>
<script>
    export default {
        name: "NavbarButton",
        props: ["menu"],
        data: function() {
            return {
                displayChildren: false
            };
        },
        methods: {
            switchDisplayChildren: function() {
                this.displayChildren = !this.displayChildren;
                this.hideChildren();
            },
            hideChildren: function() {
                if (!this.displayChildren && this.menu.children) {
                    for (var i = 0; i < this.menu.children.length; i++) {
                        var child = this.menu.children[i];
                        child.displayChildren = false;
                        child.hideChildren();
                    }
                }
            }
        }
    };

变量displayChildren在true和false之间切换，将类从dropdown-menu-hide更新为dropdown-menu-show，反之亦然。但是我得到消息：

V-on处理程序中的错误：“ TypeError：child.hideChildren不是函数”

我的代码有什么错？而且，我使用变量displayChildren的想法正确吗？

我在2.6.10版中使用Vuejs。

谢谢！

Answer 1

我找到了我想要的。我将道具作为对象传递：

<template>
    <li class="nav-item nav-item-text mr-2">
        <a
            class="nav-link"
            v-bind:class="{withChildren: children && children.length }"
            v-on:click="switchDisplayChildren"
            href="#"
        >{{ text }}</a>
        <ul 
            v-if="children && children.length"
            v-bind:class="{'dropdown-menu-hide': !displayChildren, 'dropdown-menu-show': displayChildren }"
        >
            <navbar-button v-for="child in children" :key="child.id" v-bind="child"></navbar-button>
        </ul>
    </li>
</template>
<script>
    export default {
        name: "NavbarButton",
        props: {
            id: Number,
            text: String,
            displayChildren: Boolean,
            children: Array
        },
        methods: {
            switchDisplayChildren: function() {
                this.displayChildren = !this.displayChildren;
                if (!this.displayChildren) {
                    this.hideChildren(this.children);
                }
            },
            hideChildren: function(children) {
                if (children) {
                    var count = children.length;
                    for (var i = 0; i < children.length; i++) {
                        var child = children[i];
                        child.displayChildren = false;
                        this.hideChildren(child.children);
                    }
                }
            }
        }
    };
</script>

Vuejs：如何更新子组件中的数据？

1 个答案: