英文:
Alpine.js global store data is not injected
问题
这是我对阿尔卑斯的初次尝试，但我遇到了一些问题。
通常情况下，当我使用阿尔卑斯数据时，所有内容都会在同一个父 div 中容器化。
<div x-data="hello">
<div x-show="hello></div>
</div>
在我的情况下，我需要将 div 拆分以处理一些 x-show 属性，如下所示：
<div x-data="hello"></div>
<div x-show="hello></div>
因此，我尝试使用 Alpine.Store 来获取全局数据，但问题是移动菜单从未出现，同时在移动菜单 div 中使用 Alpine js 开发工具观察到 openMobileMenu 数据没有被注入，而在导航栏中我看到了 openMobileMenu 发生了变化。
<script type="text/javascript">
document.addEventListener('alpine:init', () => {
Alpine.store('mobileMenu', {
openMobileMenu: false,
toggleMobileMenu() {
this.openMobileMenu = ! this.openMobileMenu;
},
})
})
</script>
<header>
<!-- Navbar goes here -->
<nav class="bg-gray-800">
<div class="max-w-6xl mx-auto px-4">
<div class="flex justify-between">
<div class="self-center">
//一些内容
<!-- 移动菜单按钮 -->
<div x-data class="md:hidden flex items-center h-14">
<button class="outline-none mobile-menu-button" @click="$store.mobileMenu.toggleMobileMenu">
<svg class="" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
<path d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
</div>
</div>
<!-- 移动菜单 -->
<div x-data x-show="$store.mobileMenu.openMobileMenu">
<ul class="">
<li><a href="/dome" class="">Dome</a></li>
<li><a href="/switch" class=">Switch</a></li>
</ul>
</div>
</nav>
</header>
我找到的唯一使其正常工作的方法是将数据移到页眉中，但我想知道为什么这种方式不起作用。
英文:
Is my first approach to alpine, but I have some problems.
Usually when I use alpine data everything is conteinerized in the same parent div
<div x-data="hello">
<div x-show="hello></div>
</div>
In my case I need to split the divs to handle some x-show proprierties in this way:
<div x-data="hello"></div>
<div x-show="hello></div>
So I tried to use the Alpine.Store to get global data, the problem is that the mobile menu never appear, olso watching with the alpine js devtools in the mobile menu div the openMobileMenu data is not injected, instead on the navbar I see the openMobileMenu changing.
<script type="text/javascript">
document.addEventListener('alpine:init', () => {
Alpine.store('mobileMenu', {
openMobileMenu: false,
toggleMobileMenu() {
this.openMobileMenu = ! this.openMobileMenu;
},
})
})
</script>
<header>
<!-- Navbar goes here -->
<nav class="bg-gray-800">
<div class="max-w-6xl mx-auto px-4">
<div class="flex justify-between">
<div class="self-center">
//some stuff
<!-- Mobile menu button -->
<div x-data class="md:hidden flex items-center h-14">
<button class="outline-none mobile-menu-button" @click="$store.mobileMenu.toggleMobileMenu">
<svg class="" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
<path d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
</div>
</div>
<!-- mobile menu -->
<div x-data x-show="$store.mobileMenu.openMobileMenu">
<ul class="">
<li><a href="/dome" class="">Dome</a></li>
<li><a href="/switch" class=">Switch</a></li>
</ul>
</div>
</nav>
</header>
The only way I found to make it work is moving the data in the header, but I would like why this way is not working
答案1
得分: 0
您需要在单击时调用toggleMobileMenu()，因此添加丢失的()：@click="$store.mobileMenu.toggleMobileMenu()"。
英文:
You need to call toggleMobileMenu() on click, so add the missing (): @click="$store.mobileMenu.toggleMobileMenu()"
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script type="text/javascript">
document.addEventListener('alpine:init', () => {
Alpine.store('mobileMenu', {
openMobileMenu: false,
toggleMobileMenu() {
this.openMobileMenu = ! this.openMobileMenu;
},
})
})
</script>
<header>
<!-- Navbar goes here -->
<nav class="bg-gray-800">
<div class="max-w-6xl mx-auto px-4">
<div class="flex justify-between">
<div class="self-center">
<!-- Mobile menu button -->
<div x-data class="md:hidden flex items-center h-14">
<button class="outline-none mobile-menu-button" @click="$store.mobileMenu.toggleMobileMenu()">
<svg class="" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
<path d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
Toggle menu
</button>
</div>
</div>
</div>
<!-- mobile menu -->
<div x-data x-show="$store.mobileMenu.openMobileMenu">
<ul class="">
<li><a href="/dome" class="">Dome</a></li>
<li><a href="/switch" class="">Switch</a></li>
</ul>
</div>
</nav>
</header>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论