Search code examples
laraveldomlaravel-bladelaravel-livewire

How to stop my data from disappearing on render?


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!


Solution

  • 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.