Vishal Ribdiya's Posts

Most of the developers are facing a select2 style removing issue when livewire renders the component.

We can resolve this issue by using a livewire javascript hook.

Here is my screen with select2 before livewire component rendering.

And when the livewire component is refreshed means re-render the select2 style is gone ☹️

How to Fix it ?? 🤔

Well, you just need to add some JQuery code to your livewire component. Here we are going to use afterDomUpdate webhook of livewire. add the following code to your livewire component :

document.addEventListener('livewire:load', function (event) {
   window.livewire.hook('afterDomUpdate', () => {         
   $('#select2ID').select2();     
   }); 
});

livewire:load is listening events when the livewire component is loaded and we can add our code within it.

And now when your livewire component is refreshed your select2 style will be still there as we are again applying it.

Other Livewire Posts:

• Setup livewire with component example
• How to use livewire pagination

Stay tuned to us for more interesting stuff about livewire.

 composer require livewire/livewire 

  ...      
@livewireStyles   
   
   ...
     @livewireScripts
  
  

php artisan make:livewire Summation

// app/Http/Livewire/Summation/php
namespace App\Http\Livewire;

use Livewire\Component;

class Summation extends Component
{
    public function render()
    {
        return view('livewire.summation');
    } 
}

// resources/views/livewire/summation.blade.php

 
    ...
    @livewireStyles
 
 
    

    ...

    @livewireScripts
 
 

namespace App\Http\Livewire;

use Livewire\Component;

class Summation extends Component
{ 
   public $value1 = 0;
   public $value2 = 0;
   public $sum = 0;

   public function mount()
   {
      $this->sum = 0;
   }

   public function render()
   {
      $this->sum = $this->value1 + $this->value2;

      return view('livewire.summation');
   }
 }

Livewire is a very awesome thing that I have ever seen, the old school developers are still using the jquery and ajax concept to not refresh the page. But forget the jquery and ajax stuff. If you are good at PHP then you can do the same with Laravel Livewire.

Wait what?

Load dynamic data on the page without using ajax? Yes, it is possible with Laravel Livewire. So that is all about laravel livewire, and in this tutorial, we will see how to build laravel pagination with laravel livewire.

Let's start and I hope you have already set up the livewire. Let's say you already have created a component named UsersListing Now in the users listing, we want to paginate all users and we will list 10 records per page.

How to use pagination with Laravel Livewire

Livewire provides a trait called WithPagination and you have to add it into your component UsersListing. Check out the following code:

use Livewire\WithPagination; 
use Livewire\Component; 
class UsersListing extends Component 
{ 
   use WithPagination;

   public function render() 
     { 
       return view('livewire.users.index', [ 'users' => User::paginate(10), ]); 
     } 
} 

And to load pagination you have to add the following code:

@foreach ($users as $user) ... 

@endforeach {{ $users->links() }} 

That's it, and your laravel pagination now works like charm without page refresh. There is much more about pagination like how to use it with a custom view, how to use it with a custom theme. We will see it in our next tutorial, until then enjoy the code