VueJS doesnt load/work after pagination

[mucskaati]

Hello,

I have issues after livewire pagination. When I paginate for example to second or third page, VueJS stop working, but when I refresh the page, everything works then I try again paginate to second page it will paginate to second page without refresh but again the vuejs code doesnt work.

livewire/favorite-projects.blade.php

`<div class="row">
    @forelse($favorites as $project)
    <projects-item-component :data="{{ $project->toJSON() }}" wire:key="{{ $project->id }}" inline-template>
    <div class="col-12 col-sm-6 col-xl-12">
        @include('favorites.partials.desktop')
        @include('favorites.partials.mobile')
    </div>
    </projects-item-component>
    @empty
    <div class="col-md-12 typo-h4 mt-5 d-flex justify-content-center">
        Zatiaľ nemáte žiadne obľúbené projekty
    </div>
    @endforelse
    @if($favorites->count() > 0) 
    <div class="col-12 mx-auto">
        {{ $favorites->render() }}
    </div>
    @endif
</div>`

vuejs part which doesnt work after pagination desktop.blade.php

` <div class="col-12 col-md-4 col-xl-4 favorite-projects__item-image">
        <img class="favorite-projects__item-image-house" src="{{ $project->picture }}" alt="{{ $project->title }} - Globhouse" v-if="show_visualization == true">
        <img class="favorite-projects__item-image-house" src="{{ $project->floor_plan }}" alt="{{ $project->title }} - Globhouse" v-else>
        <a href="" class="favorite-projects__item-image-more-detail">{{ $project->price }} &euro;</a>
        @include('favorites.partials.favorite-icon')
        <div class="image-switch">
            <div class="image-switch__item image-switch__item--left" :class="(show_visualization) ? 'image-switch__item--active' : ''">
                <div @click.prevent="show_visualization = true">3D vizualizácia</div>
            </div>
            <div class="image-switch__item image-switch__item--right" :class="(show_visualization) ? '' : 'image-switch__item--active'">
                <div @click.prevent="show_visualization = false">Pôdorys</div>
            </div>
        </div>
    </div>`

Livewire/FavoriteProject.php

`class FavoriteProjects extends Component implements Favorite
{
    use Favoritable;
    use WithPagination;

    public const PAGINATION = 2;

    protected $paginationTheme = 'bootstrap';

    public $favoriteProjects;

    public function __construct()
    {
    }


    public function render()
    {
        $favoriteProjects = ($this->getAllFavoriteProjects()) ?  $this->getAllFavoriteProjects()->paginate(self::PAGINATION) : collect([]);
        return view('livewire.favorite-projects', [
            'favorites' => $favoriteProjects
        ]);
    }
}
`

Thanks.

[argia-andreas]

Same issue with Vue components not working with pagination. @mucskaati Did you get it working?

[mucskaati]

@argia-andreas not yet 😢

[SPQRBrutus]

Any progress on this ? I'm using livewire datatables and vue component in it.

[argia-andreas]

For me personally I'm thinking Livewire and Vue is not a great match.

I felt me trying to force Vue working was a bit against the idea of Livewire.(my understanding of it at least)

I stopped trying to solve this and decided either to embrace Livewire / Alpine or stick with Vue. Since I already had lots of code using Vue and the project was quite JS heavy I decided to stick with Vue.

After looking at comments others made it seems that there's many issues on Vue component mounting and DOM tree stuff that's hard to solve with how Livewire works.

Looking forward to try out Livewire / Alpine in another project though.