当元素通过 JS 可见时，Alpine.js x-show 停止工作答案

【问题标题】：Alpine.js x-show stops working when element is made visible with JS当元素通过 JS 可见时，Alpine.js x-show 停止工作
【发布时间】：2021-03-20 22:56:35
【问题描述】：

我有一个通过 JS 触发器可见的模式

<div x-show="modalVisible" x.on:click.away="modalVisible = false" id="modal">
</div>

document.getElementById("modal").setAttribute("style", "display: show;")

我面临的问题是，如果我使用 JS 使模态可见 x.on:click.away 不会使模型隐藏。

我做错了什么？

【问题讨论】：

是 modalVisible = false 吗？而不是隐藏什么的？

标签： javascript alpine.js

【解决方案1】：

免责声明：我不是任何类型的 JS 专家。只是一个菜鸟。所以，如果我的理论有误，请见谅。

当您设置element.style.display = "block" 时，您将在@987654325 中设置 modalVisible = false 的属性（而不是像modalVisible = !modalVisible 这样切换属性） @表达式。

但是，您已经触发了 Alpine 的事件侦听器。然后，Alpine 将继续侦听您的 @click.away 事件，并在您每次在组件外部单击时设置 modalVisible = false。

我在我的 Codepen 上遇到过这种情况（需要调试一些 console.logs），如果我设置 @click.away ="modalVisible = !modalVisible" 来切换状态而不是设置，它会起作用像@click.away = "modalVisible = false" 这样的状态。我将属性写为show 而不是modalVisible： https://codepen.io/wanahmadfiras/pen/KKNrXOO

【讨论】：

【解决方案2】：

首先，没有display: show这样的东西，你必须设置你的初始显示，所以也许display: block可以工作。

AlpineJS 在他们的github repository 中有一个类似的示例，所以我只是对其进行了一些调整以满足您的需求。

<div id="modal" x-data="{ modalVisible: false }">
  <button @click="modalVisible = true">Open Modal</button>

  <ul x-show="modalVisible" @click.away="modalVisible = false">
    Modal Content
  </ul>
</div>

【讨论】：

感谢您的回复。我的问题如下。我有一个通过 JS 触发的模式。我已更改我的 JS 代码以设置 display="block"。但是当我在模式外部单击以关闭它时，它不会关闭。我已经在 modal 上设置了 Alpine.js：click.away="modalVisible = false"。当我让 Alpine.js 处理可见和不可见时，它工作正常
我对 x-show 的行为进行了更深入的研究。当 JS 更改 HTML 标记显示属性时，Alpine.js x-show 停止处理该标记。

【解决方案3】：

我找到了一种使用自定义事件而不是删除 display: none 使用自定义 JS 来完成这项工作的方法。

let event = new CustomEvent("modal", {
  detail: {
    items: []
  }
});
window.dispatchEvent(event);

In my HTML I added

x-on:modal.window="modalVisible = true"

虽然我仍然不知道为什么直接用 JS 更改不起作用。

【讨论】：