3

我试图通过在调整窗口大小时更改共享状态来隐藏 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 但不知何故？

4

3 回答 3

6

你试过使用@resize.window吗？（即resize使用 Alpine.js 添加监听器）它应该使您的代码比使用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>
于 2020-11-05T11:20:25.243 回答
0

x-data属性前没有空格。尝试更改此行：

<body class="font-body relative"x-data="{hideOnMobile:false}">

对此：

<body class="font-body relative" x-data="{hideOnMobile:false}">

于 2020-10-27T16:11:00.660 回答
0

看起来这是在 AlpineJS 自述文件中用作示例。看一下这个：

.window 修饰符示例：

<div x-on:resize.window="isOpen = window.outerWidth > 768 ? false : open"></div>

将 .window 添加到事件侦听器会将侦听器安装在全局窗口对象上，而不是声明它的 DOM 节点上。当您想要在窗口发生变化时修改组件状态时，这很有用，例如 resize 事件。在这个例子中，当窗口的宽度大于 768 像素时，我们将关闭 modal/dropdown，否则保持相同的状态。

于 2020-12-12T00:40:57.647 回答