Level 122
Is this code ALSO inside a livewire view?
Not sure what you mean by "when page is refreshed"
Jun 17, 2024
10
Level 1
Alpine's x-show doesn't work with livewire componenet
Following code throws component not found when page is refreshed. I use most of the day fixing this but no luck. After a research I found this is a pretty complex issue, But if anyone knows a solution please support with a reply as this is crucial for a ongoing project.
related links: github.com/alpinejs/alpine/issues/304
foreach ($comments as $comment) {
<div wire:key={{$comment->id}}>
<p> {{$comment->text}}<p>
<div x-show='show'>
<livewire:update.form :key='$comment->id'/>
<div>
</div>
}
Level 1
@Snapey yes, when livewire refresh page...
Level 122
@lakm So x-show will set or reset 'display' attribute on the Div. When the component refreshes, the display state will be reset. Are you keeping the Alpine state so say if the element is displayed or not?
Level 1
@Snapey, display variable show is kept in a parent div
<div x-data={show: false}> </div>
I don't think resetting variable status has anything to do with this as error persists refreshing happen a result of another functionality of the same page.
Level 122
@lakm Livewire does not refresh the page, it refreshes the component, so unless you can be clear about what is being refreshed and when, then noone will know what you are on about.
Level 1
@Snapey See I have updated the discussion, This is a full page components. There are sory-by options. When user click on a option order is changed that's when component refresh to display items in changed order.
Level 122
@lakm you are using identical wire key for the parent and the child component? Try prefixing them.
Also, is your primary key a simple integer?
Level 1
@Snapey yes it is simple integer after I change keys to {{Str::random()}} it works fine. But it is very odd as per livewire documentation livewire.laravel.com/docs/troubleshooting#adding-wirekey. In example it uses identical keys and say nothing about being simple integer
Level 122
@lakm three separate issues here
duplicate key: you are using in your loop a simple number, and passing that same number on to the child for it to use. Better to differentiate them, eg <div wire:key="outer{{$comment->id}}">
integer keys: I asked about integer primary key, because if it were a uuid for instance then you MUST quote the key, but as an integer you can get away without using quotes as you have done
random keys: NEVER use a random value for wire key. This is as good as not using a key at all. But also dont reuse the same key anywhere on the page. Use something fixed to what you are iterating over, but prefix or suffix to make unique.
Remember, Livewire keys can be strings and should be unique on the page
Level 1
@snapey Appreciate your support, But I actually try all the steps you have mentioned even check if my primary keys are unique (I know it's absurd). Tried to add suffix and prefix make keys unique for each child components.
But only two options worked,
One is using {{str::random}} for keys, as you said that should not never do.
Other is not using alpine to show/hide the component.
I know it is very odd that's why I'm really confused.
Please or to participate in this conversation.