laravel foreach 循环中的 Alpinejs Hide/Show 元素

Question

我在一个项目中使用带有 laravel 的 alpinejs，对于我想添加 hide/show 按钮以显示描述的每一行数据，当我按下 show every description inforeach show 时出现的问题和 hide

一样

  @foreach ($positives as $positive)
            <!-- Card -->
            <div class="bg-white rounded-lg  p-4 shadow-xs dark:bg-gray-800">
                <div class=" flex items-center justify-between p-4 bg-white rounded-lg 
                        dark:bg-gray-800">
                    <div class="flex items-center">
                        <div
                            class="p-3 mr-4 text-orange-500 bg-orange-100 rounded-full dark:text-orange-100 dark:bg-orange-500 grow-0">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7" />
                            </svg>
                        </div>
                        <div>
                            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
                                {{$positive->name}}
                            </p>
                            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200">
                                376
                            </p>
                        </div>
                    </div>



                    <div class=" cursor-pointer mb-8" @click="isDescriptionOpen=!isDescriptionOpen">

                </div>

                <div x-show="isDescriptionOpen"> 
                 <p>  description </p>
                </div>

                
            </div>
            <!-- Card -->
            @endforeach

Answer 1

这里的问题是您没有创建多个组件。

而不是：

 <!-- Card -->
 <div class="bg-white rounded-lg  p-4 shadow-xs dark:bg-gray-800">

你应该

 <!-- Card -->
 <div class="bg-white rounded-lg  p-4 shadow-xs dark:bg-gray-800" x-data="{isDescriptionOpen: false}">

并且您应该删除您可能为 isDescriptionOpen 数据创建的外部组件。

laravel foreach 循环中的 Alpinejs Hide/Show 元素

Alpinejs Hide/Show element inside laravel foreach loop

foreach

show

hide

laravel

alpinejs