5. Action

tech

Table of Content

• Introduction
• Refreshing Component
• Confirm an Action
• Passing Parameter

Introduction

Action di Livewire adalah metode pada komponen kamu yang dapat men-trigger suatu aksi ketika di klik

Contoh kita akan create data pada komponen CreatePost:

class CreatePost extends Component
{
    public $title;
    public $content;
 
    public function save()
    {
        Post::create([
            'title' => $this->title,
            'content' => $this->content
        ]);
 
        return redirect()->to('/posts');
    }
    // ...
}

Untuk viewsnya

<div>
    <form wire:submit="save">
        <label for="title">Title:</label>
        <input type="text" class="form-control" id="title" wire:model="title">
 
        <label for="content">Content:</label>
        <textarea id="content" class="form-control mt-3" wire:model="content"></textarea>
        <button type="submit" class="btn btn-primary mt-3">Save</button>
    </form>
</div>

Cara untuk dengan mudah memetakan interaksi pengguna ke fungsionalitas sisi server tanpa perlu repot mengirimkan dan menangani permintaan AJAX secara manual.

Refreshing Component

Kamu mungkin ingin menampilkan tombol kepada pengguna yang memungkinkan mereka menyegarkan hasil yang ditampilkan.

Anda dapat melakukan ini menggunakan tindakan $refresh sederhana Livewire di mana pun Anda biasanya mereferensikan metode komponen Anda sendiri:

<button type="button" wire:click="$refresh">Refresh</button>

Ketika $refresh diklik, otomatis akan merender ulang komponen Anda tanpa merefreshing atau load halaman web.

Confirm an Action

Ketika kita ingin menghapus data, sebaiknya gunakan notifikasi ya atau tidak. Biasa disebut confirm.

<button type="button" wire:click="delete" wire:confirm="Are you sure you want to delete this post?">Delete post</button>

Passing Parameter

Sebagai contoh kita akan membuat Delete Data;

public function delete($id)
{
	$post = Post::findOrFail($id);
	$post->delete();
}

Untuk Viewsnya :

@foreach($posts as $post)
<tr>
  <td>{{ $post->title }}</td>
  <td>{{ $post->content }}</td>
  <td>{{ $post->slug }}</td>
  <td>
	  <button wire:click="delete({{ $post->id }})">Delete</button>
  </td>
</tr>
@endforeach

Date : 21-02-2024