How To Load data using livewire instead of ajax?

Question

i have this perfectly working example using ajax !

>>>>ajax example ..

im using this code to load data whenever click on the nav bar :

$('#tabs li #go').click(function() {
            $('#containermenu').html('<img src="preloader.svg" >').show();
            $('#tabs li a.activetabnow').removeClass('activetabnow');
            $(this).addClass('activetabnow');
            $('#containermenu').load('http://127.0.0.1:8000/events', function() {
                $('#containermenu').fadeIn('slow');
            });

---

is it possible to do the same actions using livewire laravel ? the goal is to navigate through the menu and show data in the div whenever i click one of the nav-buttons ! if it is possible ill be happy with a suggetion or should i just go with ajax ??

Answer 1

Component

Update the livewire component like the following Sample

<?php

namespace Sample\Http\Livewire\Demo;

use Livewire\Component;

class Demo extends Component
{
public $activeTab = 0;
public function updateActiveTab($val){
 // You can add your things when clicking tabs
  $activeTab = $val;
}

Blade

Change the blade file like the following sample.

 <ul class="tabs text-center w-full overflow-hidden flex">

 <li class=" border-t border-b text-sm  text-gray-800 w-full text-center  @if($this->activeTab  === 0) active @endif">Tab 1</li>

 <li class=" border-t border-b text-sm  text-gray-800 w-full text-center  @if($this->activeTab  === 1) active @endif">Tab 2</li>

 <li class=" border-t border-b text-sm  text-gray-800 w-full text-center  @if($this->activeTab  === 2) active @endif">Tab 2</li>
</ul>
 <div class="container mx-auto px-4">
  @if($this->activeTab === 0)
<!-- 
Add your first tab content here
-->
@elseif($this->activeTab === 1)
<!-- 
Add your second tab content here
-->
@elseif($this->activeTab === 2)
<!-- 
Add your third tab content here
-->
@endif

</div>