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

Posted 2023-05-08

【中文标题】如何使用 livewire 而不是 ajax 加载数据？

【英文标题】：How To Load data using livewire instead of ajax?

【发布时间】：2021-11-16 09:30:05

【问题描述】：

我有一个使用 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 吗？？

【参考方案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;

刀片

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

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