I'm working on a project where I use Livewire to create components that will be rendered in a view. Basic stuff, but I've come across this weird problem that I haven't been able to find the answer to in a few days. When I load a component in my blade, it just pops up for a second and the disappears, I'm guessing that when everything renders. In my component I load $tagName through a route, then I use that to load posts that have that tag, this is the mount of my component, I've DD() this and everything returns the correct thing :
public function mount(Tag $tagName)
{
$this->tagName = $tagName;
$this->posts = Post::has('image')->orderBy('created_at', 'desc')->skip($this->count)->take(7)
->whereHas('tags', function ($q) {
$q->where('tag_id', $this->tagName->id);
})
->get();
$this->tags = Tag::orderBy('created_at', 'desc')->get();
}
And this is my view :
<div class="posts" wire:init="mount">
@for ($i = 0; $i < count($posts); $i += 5)
<div class="row" id="double">
@for ($j = $i; $j < min(count($posts), $i + 2); $j++)
<div class="card" wire:key="$loop->index()">
<img src="{{ asset('storage/images/' . $posts[$j]->image->name) }}" class="image"
width="544.03px" height="327.97px"/><br>
<div class="text">
<div class="title">
<h5>{{ $posts[$j]->title }}</h5>
<p>by {{ $posts[$j]->admin->first_name }}/
{{ date('d-m-Y', strtotime($posts[$j]->created_at)) }}</p>
</div>
</div>
</div>
@endfor
</div>
@if ($j >= count($posts))
@break
@endif
<div class="row" id="triple">
@for (; $j < min(count($posts), $i + 5); $j++)
<div class="card" wire:key="$loop->index()">
<img src="{{ asset('storage/images/' . $posts[$j]->image->name) }}" class="image"
width="356.9px" height="327.97px"><br>
<div class="text">
<div class="title">
<h5>{{ $posts[$j]->title }}</h5>
<p>by {{ $posts[$j]->admin->first_name }}/
{{ date('d-m-Y', strtotime($posts[$j]->created_at)) }}</p>
</div>
</div>
</div>
@endfor
</div>
@endfor
@if ($message == null)
<button type="button" id="load_more" wire:click="$emit('loadMoreData')">
CARICA ALTRO
</button>
@else
<p class="pb-5 mb-5">{{ $message }}</p>
@endif
</div>
Also my route is just Route::view('/blog/{tagName}', 'pages.blog-tags');
where I have multiple loaded components and the link to the blade above is :
@livewire('blog-page.display-tag', ['tagName' => \Illuminate\Support\Facades\Route::getCurrentRoute()->parameters['tagName']])
I've looked through the Livewire documentation and threads like https://laracasts.com/discuss/channels/livewire/why-is-the-section-of-my-view-disappears-on-render , but I just can't seem to fixed it. My opinion is that the culprit is the wire:key="$loop->index()"
, i have tried index, $posts[j], lang{{ $loop->index }}, so if you have any ideas please let me know! Thank you in advance!
I got it finally, so there was absolutely no need for me to use the wire:key, I rendered the variables correctly and they should have worked on their own. Also there was no need for the wire:init on the parent .
Since I've found the answer, I'll leave it up to the mods if i should delete it or leave it for other people who may be stuck like me on this.