如何在 Alpine.js 中更改共享 state？
[英]How to change shared state in Alpine.js?
问题描述
我试图通过在调整 window 大小时更改共享 state 来隐藏 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;
}
};
它应该将 state ** hideOnMobile** 更改为 true 但它不知道怎么回事？
3 个解决方案
解决方案1
7 已采纳 2020-11-05 11:20:25
您是否尝试过使用@resize.window ？ （即使用 Alpine.js 添加resize侦听器）它应该使您的代码比使用window.onresize + 尝试更新 Alpine.js __x.$data内部更简单。
<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>
解决方案2
0 2020-10-27 16:11:00
x-data属性前没有空格。 尝试更改此行：
<body class="font-body relative"x-data="{hideOnMobile:false}">
对此：
<body class="font-body relative" x-data="{hideOnMobile:false}">
解决方案3
0 2020-12-12 00:40:57
看起来这在 AlpineJS 自述文件中用作示例。 看一下这个：
.window 修饰符示例：
<div x-on:resize.window="isOpen = window.outerWidth > 768 ? false : open"></div>
将 .window 添加到事件侦听器将在全局 window object 而不是声明它的 DOM 节点上安装侦听器。 当您想要修改组件 state 时，当 window 发生某些变化时（例如调整大小事件），这很有用。 在此示例中，当 window 的宽度大于 768 像素时，我们将关闭模态/下拉菜单，否则保持相同的 state。
如何更改 Google Maps Autocomplete javascript 中的 Alpine.js x-data 值？
[英]How to change Alpine.js x-data value in Google Maps Autocomplete javascript?
我需要在 Alpine.js 组件的初始化处触发一个“更改”事件
[英]I need to fire a “change” event at the init of an Alpine.js component
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.