如何更改 Alpine.js 中的共享状态？

Question

如何更改 Alpine.js 中的共享状态？

Ume*_*rov 4 javascript shared-state alpine.js

我试图通过在调整窗口大小时更改共享状态来隐藏 DOM 内的多个元素。

<body class="font-body relative" x-data="{hideOnMobile:false}">
 <section class="mt-5" :class={'section' : !hideOnMobile , 'hidden' : hideOnMobile}">
   ...
  </section>
</body>

Run Code Online (Sandbox Code Playgroud)

当我尝试

window.onresize = function (event) {
   let data = document.querySelector('[x-data]');
         
       if (window.innerWidth > 639) {
           return data.__x.$data.hideOnMobile = true;
       }
    };

Run Code Online (Sandbox Code Playgroud)

它应该将状态 ** hideOnMobile** 更改为 true 但不知何故没有任何想法？

Answer 1

Hug*_*ugo 7

你尝试过使用@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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	5 年，8 月前
查看次数：	4999 次
最近记录：	5 年，6 月前