每次刷新页面时如何防止 alpine.js 模态显示答案

【问题标题】：How to prevent alpine.js modal from showing every time i refresh the page每次刷新页面时如何防止 alpine.js 模态显示
【发布时间】：2021-02-02 09:56:14
【问题描述】：

我在我的项目中使用 alpine.js，并且我有一个与 alpine.js 配合良好的模式，我的问题是，每当您刷新页面时，它会显示一两秒钟（页面加载时）并且然后消失。我不想在加载时看到它。有没有办法在 alpine.js 中解决这个问题？

我的代码

// Initialize data
<body x-data="{openModal: false}"
 :class="openModal ? 'overflow-hidden' : 'overflow-visible'"
>

// button
<button @click="openModal = true">
Open Modal
</button>
<!-- Modal -->
<div x-show="openModal">
<!-- content --> 
</div>
</body>

【问题讨论】：

标签： javascript html alpine.js

【解决方案1】：

您正在寻找x-cloak 指令。

这是一个非常简单的，当 Alpine 启动时它会从组件中移除。

因此，在您的情况下，您可以添加以下style（这将隐藏具有x-cloak 属性的元素）并将x-cloak 添加到您的Alpine.js 组件（在本例中为body）。

<style>
[x-cloak] { display: none }
</style>
<body x-cloak x-data="{openModal: false}"
 :class="openModal ? 'overflow-hidden' : 'overflow-visible'"
>

// button
<button @click="openModal = true">
Open Modal
</button>
<!-- Modal -->
<div x-show="openModal">
<!-- content --> 
</div>
</body>

【讨论】：

它似乎对我不起作用。在我的脑海中，我有我的 css，我的 alpine.js 脚本标签，在下面我提出了你的建议。
Nvm 我知道了，没注意到你在 body 中添加了 x-cloak，我的错。
是的，也许我会更新答案以使其更清晰

【解决方案2】：

x-cloak 是正确的答案！但在更多情况下为了安全起见，请使用 css 重要规则。

<style>
  [x-cloak] { 
      display: none !important;
   }
</style>

【讨论】：

这行得通...谢谢