x-for 循环中的 querySelectorAll

问题描述

我试图在 data-xxx 循环中获取所有 x-for，但 nodeList 始终为空。

<section id="content" x-data="animate()" x-init="init()">
   <h1>Title here</h1>

   <template x-for="i in items">
      <div class="Box" data-class-in="fadeIn" data-class-out="fadeOut">
          <h2>Content Here</h2>
      </div>
   </template>
</section>

这是我的js代码

function animate() {
   return {
      items: 12,target = null,init: function () {
         this.target = document.querySelectorAll("[data-class-in],[data-class-out]");
         console.log(this.target);
      },}
}

也尝试过 this.$el.querySelectorAll("[data-class-in],[data-class-out]")。什么都没有发生

有什么帮助吗？

非常感谢

解决方法

您需要等待初始 x-for 渲染发生，在 Alpine 中使用 $nextTick() 完成（请参阅文档 https://github.com/alpinejs/alpine/#nexttick）

function animate() {
   return {
      items: 12,target = null,init: function () {
         // setTimeout(() => {},0) should also work
         this.$nextTick(() => {
           this.target = document.querySelectorAll("[data-class-in],[data-class-out]");
           console.log(this.target);
         });
      },}
}