如何从普通 JS 访问 Alpine 变量？

Question

我想在 X 秒后用 Alpine 隐藏一个元素。因此，我需要运行 setTimeout() 来更改元素的 x-show 绑定到的 x-data 变量。

我目前正在使用带有普通 JS 的脚本标记，但我似乎无法从中访问 x-data 变量。

举个例子：

<div x-data="showSomething = true">
    <script>
        setTimeout(() => {
            this.showSomething = false;
        }, 1500);
    </script>
</div>

无论我使用“this”，我都会收到此错误。或不：

未捕获的引用错误：showSomething 未定义

我怎样才能从普通的JS访问x-data变量，或者有没有办法在Alpine中解决这个问题？

编辑：我通过使用 x-on 侦听事件解决了这个问题（并引用该函数中没有 .this 的变量）

Answer 1

使用x-init。

<div
    x-data="{ showSomething: true }"
    x-init="setTimeout(() => { this.showSomething = false; }, 1500)"
>
</div>