Не корректно работает x-show livewire, почему?

Question

[Марк Ешкилев]

Столкнулся с такой интересной проблемой, есть компонент select-color

@props(['width' => "w-48", 'data' => [], 'disabled' => 'false'])

<div x-data="{ open: false, selectedOption: @entangle($attributes->wire('model')).live, data: {{ json_encode($data) }} }" class="relative mt-1">
    <button
        x-on:click="open = !open"
        type="button"
        :disabled="{{ $disabled }}"
        class="flex items-center justify-between px-4 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:ring-2 focus:ring-blue-600 {{ $width }}"
    >
        <span x-text="selectedOption || 'Выберите цвет'" class="truncate"></span>
        <svg
            class="w-5 h-5 ml-2 -mr-1"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
        >
            <path
                fill-rule="evenodd"
                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                clip-rule="evenodd"
            />
        </svg>
    </button>

    <div
        x-show="open"
        x-on:click.away="open = false"
        x-cloak
        class="absolute z-10 mt-2 bg-white rounded-md shadow-xl {{ $width }} max-h-40 overflow-y-auto"
    >
        <ul class="py-1 text-sm font-medium text-gray-700 ring-1 ring-black ring-opacity-5 rounded-md">
            @foreach ($data as $key => $value)
                <li
                    x-on:click="selectedOption = '{{ $value }}'; open = false;"
                    class="px-4 py-2 border-b hover:bg-gray-100 cursor-pointer"
                    :class="selectedOption == '{{ $value }}' ? 'bg-gray-200 hover:bg-gray-200' : ''"
                >
                    {{ $value }}
                </li>
            @endforeach

            <li
                class="px-4 py-2 border-b hover:bg-gray-100"
            >
                <x-input type="text" class="w-full text-sm" x-model="selectedOption" placeholder="Или введите цвет" />
            </li>
        </ul>
    </div>
</div>

если я попытаюсь пробросить в него массив, по типу

<x-dashboard.select-color id="color" :data="[1 => 'серый', 2 => 'красный']" wire:model='animalForm.animal_color_id' width="w-full" />

то все работает отлично, но стоит мне динамически уже после загрузки всего сайта подгрузить массив туда, типо

<x-dashboard.select-color id="color" :data="$categoryColors" wire:model='animalForm.animal_color_id' width="w-full" />

то в итоге при нажатии на li элмент, open = false, даже через консоль посмотрел, но элемент не исчезает, может кто знает почему так

Comments

[Марк Ешкилев]

при этом на click.away тоже все отлчино работает во всех случаях

[iljaGolubev]

Всё что нужно по документации сделано?
These properties are not reactive by default

https://livewire.laravel.com/docs/nesting#reactive...

[Марк Ешкилев]

iljaGolubev, у меня не компонент livewire, а обычный компонент laravel который я добавляю в компоненте livewire, и это не работает

Answer 1

[Марк Ешкилев]

Решением оказалось добавить wire:key к первому div в компоненте laravel...

Comments

[iljaGolubev]

а какая версия livewire у вас?

[Марк Ешкилев]

iljaGolubev, 3