How can we use the CNavGroup component with v-for | CNavGroup | NavLinks?

[sachinkumar121]

Platform information:

Operating system and version: macOS 11.5.2 Browser and version: Chrome 100.0.4896

I am using coreUI vue version 4.3.0 I was creating my custom sidebar where I use the v-for loop to create the CNavGroup with the CNavItem component. When I test with static data then the show class is assigned to only one nav group, which is fine. but when I use the data object(with v-for) and dynamically set the NavGroup the show class is not removed when you open another NavGroup. Your package should also provide the option to show/hide the Backdrop with the sidebar menu. I tried by setting the key to each NavGroup as well but not working.

CustomSidebar.vue

<template>
<CSidebar visible>
  <CSidebarBrand>Sidebar Brand</CSidebarBrand>
  <CSidebarNav>
	<template v-for="(navItem, index) in navItems">
		<router-link :to="navItem.to" :custom="false" v-slot="{ isExactActive }" v-if="navItem.to">
			<CNavItem :active="isExactActive" :href="navItem.to">
				<Icon :icon="navItem.icon" :height="24" />
				<span class="text text-hidden">{{navItem.name}}</span>
			</CNavItem>
		</router-link>
		<CNavGroup v-else>
			<template #togglerContent>
				<Icon :icon="navItem.icon" :height="24" />
				<span class="text text-hidden">{{navItem.name}}</span>
			</template>
			<template v-for="navItemChild in navItem.items">
				<router-link :to="navItemChild.to" :custom="false" v-slot="{ isExactActive }" v-if="navItemChild.to">
					<CNavItem :active="isExactActive" :href="navItemChild.to">
						<Icon v-if="navItemChild.icon" :icon="navItemChild.icon" :height="24" />
						<span class="text text-hidden">{{navItemChild.name}}</span>
					</CNavItem>
				</router-link>
			</template>
		</CNavGroup>
	</template>
    <li class="nav-title">Nav Title</li>
    <CNavItem href="#">
      <CIcon  customClassName="nav-icon" icon="cil-speedometer"/>
      Nav item
    </CNavItem>
    <CNavItem href="#">
        <CIcon  customClassName="nav-icon" icon="cil-speedometer"/>
        With badge
        <CBadge color="primary ms-auto">NEW</CBadge>
    </CNavItem>
    <CNavGroup>
      <template #togglerContent>
        <CIcon  customClassName="nav-icon" icon="cil-puzzle"/> First dropdown
      </template>
      <CNavItem href="#">
        <CIcon  customClassName="nav-icon" icon="cil-puzzle"/> First dropdown item(A)
      </CNavItem>
      <CNavItem href="#">
         <CIcon  customClassName="nav-icon" icon="cil-puzzle"/> First dropdown item(B)
      </CNavItem>
    </CNavGroup>
	<CNavGroup>
      <template #togglerContent>
        <CIcon  customClassName="nav-icon" icon="cil-puzzle"/> Second Nav dropdown
      </template>
      <CNavItem href="#">
        <CIcon  customClassName="nav-icon" icon="cil-puzzle"/> Second Nav dropdown item(A)
      </CNavItem>
      <CNavItem href="#">
         <CIcon  customClassName="nav-icon" icon="cil-puzzle"/> Second Nav dropdown item(B)
      </CNavItem>
    </CNavGroup>
	<CNavGroup v-for="nav in navItems">
      <template #togglerContent>
        <CIcon  customClassName="nav-icon" icon="cil-puzzle"/> {{ nav.group_name}}
      </template>
      <CNavItem v-for="item in nav.items">
        <CIcon  customClassName="nav-icon" icon="cil-puzzle"/> {{ item}}
      </CNavItem>
    </CNavGroup>
	
  </CSidebarNav>
  <CSidebarToggler/>
</CSidebar>
</template>

<script>
    export default {
        name: "CustomSidebar",
        data() {
            return ({
                navItems: [
                    {"group_name": "dynamic G one", items: ['dynamic GI(A)', 'dynamic GI(B)']},
                    {"group_name": "dynamic G two", items: ['dynamic GK(A)', 'dynamic GK(B)']}
                ]
            });
        },
    }
</script>