AlpineJS x-show 不随状态变化而更新答案

【问题标题】：AlpineJS x-show not updating with state changeAlpineJS x-show 不随状态变化而更新
【发布时间】：2021-06-06 02:58:03
【问题描述】：

我有一个问题，我有一个通知面板，当单击按钮时应该打开。当我单击按钮时，什么也没有发生。控制台也没有错误。

<body>
    <div x-data="Setup()">
        <button
        @click="isNotificationsPanelOpen=true"
        >BUTTON</button>

        <section
        x-ref="notificationsPanel"
        x-show="isNotificationsPanelOpen"
        @keydown.escape="isNotificationsPanelOpen=false">
            NOTIFICATIONS PANEL
        </section>
    </div>

    <script>
    function Setup()
    {
        return {
            loading: true,
            isNotificationsPanelOpen: false,
            openNotificationsPanel() {
                this.isNotificationsPanelOpen = true;
                console.log('openNotificationsPanel called');
                console.log(this.isNotificationsPanelOpen);
                this.$nextTick(() => {
                    this.$refs.notificationsPanel.focus()
                })
            }
        }
    }
    </script>

    @stack('modals')

    @livewireScripts
</body>

我没有使用@click="isNotificationsPanelOpen=true"，我也尝试使用@click="openNotificationsPanel"，通过这样做我看到了console.log消息，但面板仍然保持为display:none。

我对 AlpineJS 还很陌生，但我相信这应该可以，请有人告诉我为什么不可以吗？

【问题讨论】：

标签： laravel-8 alpine.js

【解决方案1】：

当我尝试这段代码时，它正在工作，但它正在重新加载页面。

您可以通过在@click 事件中添加 .prevent 来停止重新加载。

 <button @click.prevent="isNotificationsPanelOpen=true">
   BUTTON
 </button>

【讨论】：