x-data nested in another x-data

[tengkuzulfadli]

Hi,

I tried to figure out how to nested x-data inside another x-data on responsive navbar. The mega menu that I'm building is quite complicated where it has 3 levels.

On responsive navbar, I added x-data for the toggle button and placed the x-show on the li tag. The problem is, inside the li tag has another x-data that holding a toggle function of Level 2 & Level 3 - Navbar. It's working perfectly on mobile but all navbar is hidden.

Any idea the best way to make it works?
`

        <nav class="w-auto lg:pl-12" id="nav-content">
            <ul x-data="{ navOpen: false }" class="menu grid grid-cols-3 sm:grid-cols-1 justify-center items-center text-center text-base pt-4 md:pt-0">
                <!--This is responsive buttons-->
                <button class=" hidden xs:block sm:block w-10 h-10 bg-rb_earth-light relative focus:outline-none" @click="navOpen = !navOpen">
                    <span class="sr-only">Open main menu</span>
                    <div class="block w-5 absolute left-1/2 top-1/2   transform  -translate-x-1/2 -translate-y-1/2">
                        <span aria-hidden="true" class="block absolute h-0.5 w-5 bg-text_rb-dark_gray transform transition duration-500 ease-in-out" :class="{'rotate-45': navOpen,' -translate-y-1.5': !navOpen }"></span>
                        <span aria-hidden="true" class="block absolute  h-0.5 w-5 bg-text_rb-dark_gray transform transition duration-500 ease-in-out" :class="{'opacity-0': navOpen } "></span>
                        <span aria-hidden="true" class="block absolute  h-0.5 w-5 bg-text_rb-dark_gray transform  transition duration-500 ease-in-out" :class="{'-rotate-45': navOpen, ' translate-y-1.5': !navOpen}"></span>
                    </div>
                </button>

               <li x-show="navOpen" class="visible text-gray-500 item">
                    <div x-data="{ open: false }">
                        <div class="flex w-full">
                            <span class="pr-1 pb-3 no-underline text-base hover:text-black">Shop</span>
                            <button @click="open = !open" class="flex items-center justify-between pb-3 text-gray-500 hover:text-gray-700 focus:outline-none">
                                <span>
                                    <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path x-show="! open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" style="display: none;" />
                                        <path x-show="open" d="M19 9L12 16L5 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                </span>
                            </button>
                        </div>
                            
                        <div x-show="open" x-transition:enter="transition ease-out duration-150 transform" x-transition:enter-start="opacity-0 -translate-y-5" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-150 transform" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-5" class="w-screen pt-3 pl-16 mega-menu shadow-sm grid-cols-8 justify-center items-center text-center h-14 bg-rb_gray-light lg:pl-8 md:pl-1">
                                
                            <!--Level 3 - Prams & Stroller-->
                            <span class="relative w-screen" x-data="{ open: false }">
                                
                                <a @click="open = !open" :class="{ 'font-bold text-text_rb-black': open === true }" class="line-below-ps pl-20 pr-5 text-sm md:pr-1 md:pl-16" href="#">Prams & Strollers</a>
                                
                                <div x-show="open" @click.away="open = false" class="w-screen h-auto pb-14 pl-16 mt-5 -mx-20 lg:pl-6 lg:-mx-12 md:-mx-5 md:pl-2 md:pb-16 border border-rb_white-white shadow-md absolute bg-rb_white-white"></div>

`

I'm not going to insert all the navbar code because it has up to 1500 lines but the above code is a part of the navbar code. I did try to use $refs and $parent but it's still not working

[jimafisk]

I had a similar question that was solved using getters. Hope that helps!