如何使用vue js Composition API在导航栏上单独切换子菜单

我正在使用vue.js composition API来处理这个导航栏，现在我尝试在点击它时切换子菜单。由于我正在迭代一个对象来显示子菜单，所以我不能在每个子菜单上添加“click”事件，所以我的问题是我如何才能完成这一点，这可能吗？
到目前为止，这是我的代码（我添加了一个变量（showSubmenu），并将其绑定到“ul”以使用“v-if”进行切换，但这会导致所有子菜单同时显示）

<!-- ====================SCRIPTS =================== -->
<script setup>
import Icon from '../Shared/Icon.vue';
import { Link } from '@inertiajs/inertia-vue3';
import { ref } from 'vue';

const showDropdown = ref(false)
const showSubmenu = ref(false)

const menu = ref([
    {
        id: 1,
        name: 'dashboard',
        icon_name: 'dashboard',
        submenu: [],

    },
    {
        id: 2,
        name: 'residentes',
        icon_name: 'down',
        submenu: [
            { name: 'admin. residentes', icon: 'residentes' },
            { name: 'admin. familiares', icon: 'family' }
        ],
    },
    {
        id: 3,
        name: 'empleados',
        icon_name: 'down',
        submenu: [
            { name: 'admin. empleados', icon: 'empleados' },
            { name: 'sueldos', icon: 'sueldos' },
            { name: 'jornadas de Trabajo', icon: 'jornadas' },
            { name: 'Permisos', icon: 'permisos' }
        ],

    },
    {
        id: 4,
        name: 'usuarios',
        icon_name: 'down',
        submenu: [
            { name: 'admin. usuarios', icon: 'usuarios' },
            { name: 'roles', icon: 'roles' },
            { name: 'acceso', icon: 'premission' }
        ],

    },
    {
        id: 5,
        name: 'finanzas',
        icon_name: 'down',
        submenu: [
            { name: 'ingresos', icon: 'ingresos' },
            { name: 'egresos', icon: 'egresos' }
        ],

    },
])

</script>

<!-- ==================== HTML ==================== -->

<nav class="" v-if="showDropdown">
                    <ul class="">
                        <li v-for="item in menu" :key="item.id" class="pb-2">
                            <button v-if="item.submenu.length" @click="showSubmenu = !showSubmenu">
                                <Icon :name="item.icon_name" class="w-5 h-5 mr-2 inline fill-slate-500" />
                                <span class="capitalize"> {{ item.name }}</span>
                            </button>
                            <Link v-else>
                                <Icon :name="item.icon_name" class="w-5 h-5 mr-2 inline fill-slate-500" />
                                <span class="capitalize"> {{ item.name }}</span>
                            </Link>
                       <! -- ================ HERE IS MY SUBMENU ================ -->
                            <ul v-if="item.submenu.length && showSubmenu" class="pl-3 pt-1">
                                <li v-for="subitem in item.submenu" :key="subitem" class="pb-1">
                                    <Link class="capitalize">
                                    <Icon :name="subitem.icon" class="w-5 h-5 mr-2 inline fill-slate-500" />
                                    {{ subitem.name }}
                                    </Link>
                                </li>
                            </ul>
                        </li>
                    </ul>
</nav>

你使用一个布尔值来切换所有的子菜单。在这种情况下，输出将如图所示。但是你可以在对象中添加布尔值，这样你就可以通过抓取被点击的索引然后调用函数来对每个项目进行不同的切换。

const menu = ref([
    {
        id: 1,
        name: 'dashboard',
        icon_name: 'dashboard',
        submenu: [],
        toggle_submenu: false
    },
    {
        id: 2,
        name: 'residentes',
        icon_name: 'down',
        submenu: [
            { name: 'admin. residentes', icon: 'residentes' },
            { name: 'admin. familiares', icon: 'family' }
        ],
        toggle_submenu: false
    }], ....

然后，

var toggle_sub_menu = (index) => {
    // Loop through all object and set boolean false
   menu.forEach(function(item) {
        item.toggle_submenu = false
   });
   // toggle the selected item true
   menu[index].toggle_submenu = true;
}

您可以在单击切换菜单时调用此函数，如下所示

<li v-for="(item, index) in menu" :key="item.id" class="pb-2">
<button v-if="item.submenu.length"    @click="toggle_sub_menu(index)">

如何使用vue js Composition API在导航栏上单独切换子菜单

1条答案

相关问题

热门标签

最新问答