How To Load data using livewire instead of ajax? - php

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>