Javascript 使用js使元素可见时，Alpine.js x-show将停止工作

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

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

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

document.getElementById（“模态”）.setAttribute（“样式”，“显示：显示；”）

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

---

我做错了什么？

首先，没有显示：显示这样的东西，你必须设置你的初始显示，所以也许显示：块可以工作

AlpineJS在他们的应用程序中有一个类似的例子，所以我只是对其进行了一些修改，以满足您的需要

<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>

开放模态

模态内容

我找到了一种方法，可以使用自定义事件而不是删除display:none和customjs来实现这一点

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

In my HTML I added

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

---

这是可行的，尽管我仍然不知道为什么直接用JS修改不起作用。

免责声明：我不是JS方面的专家。只是一个傻瓜。所以，如果我的理论错误，很抱歉

当您设置

element.style.display=“block”

时，您正在设置

modalVisible=false

的属性（与

togging类似
modalVisible=！modalVisible
的属性相反），就像在
@click.away
表达式中一样

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

我在我的代码笔上玩过这种情况（使用一些要调试的
控制台.log
s），如果我设置
@click.away=“modalVisible=！modalVisible=！modalVisible”
来切换状态，而不是像
@click.away=“modalVisible=false”
那样设置状态，它就会起作用。我将属性写为
show
，而不是
modalVisible
：
是否为modalVisible=false？而不是躲起来什么的？谢谢你的回复。我的问题如下。我有一个通过JS触发的模式。我已将JS代码更改为设置display=“block”。但是，当我在模式外部单击以关闭时，它不会关闭。我已经在模态上设置了Alpine.js:click.away=“modalVisible=false”。当我让Alpine.js处理使可见和使不可见时，它工作得很好，我对x-show的行为有了更深的了解。当HTML标记显示属性被JS更改时，Alpine.JS x-show将停止处理该标记。