alpine.js 嵌套 for 循环 - x-show 仅在子项目上

Question

是否可以仅在所选项目上绑定 x-show？

我有一个数据数组 [{firstname:'test', meetings:'[{'day':'17', 'month':'02'},{'day':'18', 'month':'02'}] ......等等}]

我只想显示用户，当我点击用户时我想显示会议。就像在 tabulator js (group-by) 上一样，问题是，当我单击一个用户时，所有其他会议也会显示出来，因为全局变量 open 已更改。

我的代码：

  <div class="w-full">
   <template x-for="user in data">
    <div class="block">
     <div  class="bg-primary-300 rounded-lg border text-lg" >
      <div x-html="user.firstname" class="font-bold hover:bg-gray-400 cursor-pointer" @click="{open = !open}"> </div>
       <div x-show="open">
        <div class="block">
          <template x-for="meet in user.meetings">
            <div class="flex ml-32 gap-2 border-b border-gray-700">
              <div x-text="meet.day">

              </div>
              <div x-text="meet.month ">

              </div>
           </template>
         </div>
       </div>
     </div>  
   </div>
 </template>
</div>

我该如何解决这个问题？

感谢您的帮助，马丁干杯

Answer 1

假设您有一个用户 ID。您需要保存被点击的用户 ID，然后在打开的 ID 与正在迭代的当前用户 ID 匹配时切换打开。

您可以使用 @click="open = user.id" 和 x-show="open === user.id"

<div class="w-full">
   <template x-for="user in data">
    <div class="block">
     <div  class="bg-primary-300 rounded-lg border text-lg" >
      <div x-html="user.firstname" class="font-bold hover:bg-gray-400 cursor-pointer" @click="open = open === user.id ? null : user.id" </div>
       <div x-show="open === user.id">
        <div class="block">
          <template x-for="meet in user.meetings">
            <div class="flex ml-32 gap-2 border-b border-gray-700">
              <div x-text="meet.day">

              </div>
              <div x-text="meet.month ">

              </div>
           </template>
         </div>
       </div>
     </div>  
   </div>
 </template>
</div>

alpine.js 嵌套 for 循环 - x-show 仅在子项目上

alpine.js nested for loop - x-show only on subitem

javascript

tailwind-css

alpine.js