我试图通过在调整窗口大小时更改共享状态来隐藏 DOM 内的多个元素。
<body class="font-body relative" x-data="{hideOnMobile:false}">
<section class="mt-5" :class={'section' : !hideOnMobile , 'hidden' : hideOnMobile}">
...
</section>
</body>
当我尝试时
window.onresize = function (event) {
let data = document.querySelector('[x-data]');
if (window.innerWidth > 639) {
return data.__x.$data.hideOnMobile = true;
}
};
它应该将状态 ** hideOnMobile** 更改为 true 但不知何故？
最佳答案
您是否尝试过使用 @resize.window？ (即使用 Alpine.js 添加 resize 监听器)它应该使您的代码比使用 window.onresize 更简单 + 尝试更新 Alpine.js __x.$数据内部。
<body
class="font-body relative"
x-data="{hideOnMobile:false}"
@resize.window="hideOnMobile = window.innerWidth > 639"
>
<section class="mt-5" :class={'section' : !hideOnMobile , 'hidden' : hideOnMobile}">
...
</section>
</body>
关于javascript - 如何更改 Alpine.js 中的共享状态？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64558457/