Блог

У меня есть компонент livwire , который визуализирует таблицу, внутри таблицы у меня есть раскрывающийся список alpine, у меня есть еще один компонент, чтобы добавить сводку, после чего я создаю событие, чтобы попросить компонент livewire повторно открыть страницу, но раскрывающийся компонент alpine js не является свойством визуализации.

спасибо, у меня были проблемы со стрельбой, похоже, проблемы с dom diff

1, Я добавил уникальный ключ к элементу таблицы td (проблема сохраняется)

2, оберните @if внутри тега div (проблема сохраняется)

PS: Я пытаюсь заменить выпадающий компонент на простую кнопку, она работает, это действительно проблема с выпадающим списком ??

вы можете обратиться к видео ниже: https://andiliang.sgp1.digitaloceanspaces.com/Laravel — Google Chrome 2021-09-05 22-16-12.mp4

версия livewire : «живой провод/живой провод»: «^2.5» версия alpinejs : «alpinejs»: «^3.0.0»,

мое представление таблицы индексов категорий

 <div class="py-4">

    <div>

    @if( $categories->isNotEmpty() )

    <div class="mb-10">
        <x-button.circular-btn
            @click.prevent="$dispatch('open-modal')"
            class="bg-gradient-to-b from-green-400 to-blue-600"
        >
            <x-svg.plus-outline class="h-6 w-6"  />
        </x-button.circular-btn>
    </div>

    <x-admin.table.table-view>
        <x-admin.table.table class="mb-20">
            <x-slot name="thead">
                <x-admin.table.th>Name</x-admin.table.th>
                <x-admin.table.th># of Products</x-admin.table.th>
                <x-admin.table.th>Created At</x-admin.table.th>
                <x-admin.table.th>Updated At</x-admin.table.th>
                <x-admin.table.th is-to-do="true">
                    <span class="sr-only">To Do Button</span>
                </x-admin.table.th>
            </x-slot>

            @foreach( $categories as $category)
                <tr class="  bg-white "  wire:key="table{{ $loop->index }}">

                    <x-admin.table.td is-first="true">
                        {{$category->name}}
                    </x-admin.table.td>

                    <x-admin.table.td>
                        {{$category->product_counts}}
                    </x-admin.table.td>

                    <x-admin.table.td>
                        {{$category->created_at->format('Y-m-d H:m')}}
                    </x-admin.table.td>

                    <x-admin.table.td>
                        {{$category->updated_at->diffForHumans()}}
                    </x-admin.table.td>



                    <x-admin.table.td is-to-do="true" >
                        <x-admin.dropdown wire:key="dd{{ $loop->index }}">
                            <x-slot name="trigger">
                                <button  type="button"
                                        class="bg-gray-100 rounded-full flex items-center text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500"
                                        id="menu-button" aria-expanded="true" aria-haspopup="true">
                                    <span class="sr-only">Open options</span>
                                    <x-svg.dots-vertical class="h-5 w-5"/>
                                </button>
                            </x-slot>

                            <x-slot name="content">
                                <div class="py-1" role="none">
                                    <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
                                    @livewire('category-update' , [ 'category' => $category] ,  key('update'.$category->id) )
                                </div>

                                <div class="py-1" role="none">
                                    <a href="#" class="text-gray-700 group flex items-center px-4 py-2 text-sm"
                                       role="menuitem" tabindex="-1" id="menu-item-6">
                                        <x-svg.solid-trash class="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500"/>
                                        Delete
                                    </a>
                                </div>

                            </x-slot>
                        </x-admin.dropdown>

                    </x-admin.table.td>

                </tr>

            @endforeach

        </x-admin.table.table>
    </x-admin.table.table-view>

    <div class="mt-10">
        {{ $categories->links() }}
    </div>

    @else
        <div class="mt-10" x-data="">
            <x-empty-states.simple title="category" description="get start by creating a category">
                <x-button.icon-on-the-left-btn @click.prevent="$dispatch('open-modal')">
                    <x-svg.plus-solid class="-ml-1 mr-2 h-5 w-5" />
                    New Category
                </x-button.icon-on-the-left-btn>
            </x-empty-states.simple>
        </div>
    @endif
    </div>


    <x-modal.modal >
        @livewire('category-store')
    </x-modal.modal >

</div>
 

компонент живого провода с индексом моей категории

 <?php

namespace AppHttpLivewire;

use AppModelsCategory;
use LivewireComponent;
use LivewireWithPagination;

class CategoryIndex extends Component
{

    use WithPagination;

    private $categories;
    protected $listeners = [
        'categoryUpdated' => 'load',
        'categoryCreated' => 'load'
    ];


    public function load()
    {
        return Category::withProductsCount()->latest('product_counts')->paginate(10);
    }

    public function mount()
    {
        $this->categories = $this->load();
    }

    public function render()
    {
        return view('livewire.category-index',[
            'categories' => $this->load(),
        ]);
    }
}
 

alpine js dropdown component

 <div
    x-data="{isOpen: false}"
    @close-dropdown.window="isOpen = false"
    class="relative inline-block text-left"
>

    <div @click="isOpen = !isOpen " >

        {{$trigger}}
    </div>

    <div
        x-cloak
        x-show="isOpen == true"
        @click.away="isOpen = false"
        x-transition:enter="transition ease-out duration-100"
        x-transition:enter-start="transform opacity-0 scale-95"
        x-transition:enter-end="transform opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-75"
        x-transition:leave-start="transform opacity-100 scale-100"
        x-transition:leave-end="transform opacity-0 scale-95"
        class="z-10 origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none"
        role="menu"
        aria-orientation="vertical"
        aria-labelledby="menu-button"
        tabindex="-1"
    >

        {{$content}}
    </div>
</div>
 

liveewire is a very cool but encounter those dom diff issue is very frustrating, hopefully someone has more advance knowledge can assist me out thanks very much!