Method1
I can provide you with a full CRUD (Create, Read, Update, Delete) code example using Laravel Livewire for the backend and Alpine.js for showing the popup modal. Below is the complete code.
Firstly, let's create the Livewire component for the CRUD operations:
// app/Http/Livewire/ItemCrud.php
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Item;
class ItemCrud extends Component
{
public $items;
public $name;
public $editId;
protected $rules = [
'name' => 'required',
];
public function mount()
{
$this->items = Item::all();
}
public function saveItem()
{
$this->validate();
if ($this->editId) {
$item = Item::findOrFail($this->editId);
$item->update(['name' => $this->name]);
} else {
Item::create(['name' => $this->name]);
}
$this->resetForm();
$this->emit('itemCreated');
}
public function editItem($itemId)
{
$item = Item::findOrFail($itemId);
$this->name = $item->name;
$this->editId = $itemId;
}
public function deleteItem($itemId)
{
Item::findOrFail($itemId)->delete();
$this->items = Item::all();
}
private function resetForm()
{
$this->name = '';
$this->editId = null;
$this->items = Item::all();
}
public function render()
{
return view('livewire.item-crud');
}
}
Now, let's create the view file for the Livewire component:
<!-- resources/views/livewire/item-crud.blade.php -->
<div x-data="{ showModal: false }" x-init="
Livewire.on('itemCreated', () => {
console.log('data coming');
showModal = true;
})
">
<!-- Button to trigger modal -->
<button @click="showModal = true">Add Item</button>
<!-- Modal -->
<div class="modal" x-show="showModal" style="display: none;">
<div class="modal-content">
<span class="close" @click="showModal = false">×</span>
<form wire:submit.prevent="saveItem">
<input type="hidden" wire:model="editId">
<label for="name">Name:</label>
<input type="text" id="name" wire:model="name">
<button type="submit">Save</button>
</form>
</div>
</div>
<!-- Items List -->
<ul>
@foreach($items as $item)
<li>
{{ $item->name }}
<button @click="showModal = true; $wire.editItem({{ $item->id }})">Edit</button>
<button wire:click="deleteItem({{ $item->id }})">Delete</button>
</li>
@endforeach
</ul>
</div>
Method 2
here's a simple example of how you can implement a CRUD (Create, Read, Update, Delete) functionality with Livewire and Alpine.js, including the use of a popup modal for editing items:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Livewire CRUD with Alpine.js Modal</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@2.8.2/dist/alpine.min.js" defer></script>
@livewireStyles
</head>
<body>
<div x-data="{ showModal: false, editId: null }">
<!-- Button to trigger modal -->
<button @click="showModal = true">Add Item</button>
<!-- Modal -->
<div class="modal" x-show="showModal" style="display: none;">
<div class="modal-content">
<span class="close" @click="showModal = false">×</span>
<form wire:submit.prevent="saveItem">
<input type="hidden" wire:model="editId">
<label for="name">Name:</label>
<input type="text" id="name" wire:model="name">
<button type="submit">Save</button>
</form>
</div>
</div>
<!-- Items List -->
<ul>
@foreach($items as $item)
<li>
{{ $item->name }}
<button @click="showModal = true; editId = {{ $item->id }}">Edit</button>
<button wire:click="deleteItem({{ $item->id }})">Delete</button>
</li>
@endforeach
</ul>
</div>
@livewireScripts
</body>
</html>
And here's the corresponding Livewire component
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Item;
class ItemCrud extends Component
{
public $items;
public $name;
public $editId;
protected $rules = [
'name' => 'required',
];
public function mount()
{
$this->items = Item::all();
}
public function saveItem()
{
$this->validate();
if ($this->editId) {
$item = Item::findOrFail($this->editId);
$item->update(['name' => $this->name]);
} else {
Item::create(['name' => $this->name]);
}
$this->resetForm();
}
public function deleteItem($itemId)
{
Item::findOrFail($itemId)->delete();
$this->items = Item::all();
}
private function resetForm()
{
$this->name = '';
$this->editId = null;
$this->items = Item::all();
$this->showModal = false;
}
public function render()
{
return view('livewire.item-crud');
}
}
Make sure you have a Item model set up in your Laravel application for this example to work correctly.
This code provides a basic CRUD functionality with Livewire. When you click on the "Add Item" button, it will open a modal where you can add or edit an item. Items are displayed in a list, and you can delete items from the list. The modal is managed by Alpine.js to show/hide based on the showModal data property.
Top comments (0)