如何使用 livewire 而不是 ajax 加载数据？

Question

我有一个使用 ajax 的完美示例！

>>>>ajax example ..

我使用此代码在每次单击导航栏时加载数据：

$('#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');
            });

是否可以使用 livewire laravel 执行相同的操作？目标是在我单击其中一个导航按钮时浏览菜单并在 div 中显示数据！如果有可能我会对建议感到满意，还是我应该选择 ajax ??

Answer 1

组件

像下面的示例一样更新 livewire 组件

<?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

像下面的示例一样更改 blade 文件。

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

如何使用 livewire 而不是 ajax 加载数据？

How To Load data using livewire instead of ajax?

php

ajax

jquery

laravel

laravel-livewire