wire:click | Click Event in Laravel Livewire 3 | EP 10

In this post, I will show you how to call wire click event with laravel livewire 3.

In this example, we will create a ProductCreate Livewire component. The component will include a form with input fields for the product's name, price, and details. then we will add submit and reset button. when you click on reset button then we will clear inputs. so, let's follow the following steps:

Step 1: Create ProductCreate Component

Now here we will create a Livewire component using their command. So run the following command to create an add more component.

php artisan make:livewire ProductCreate

Now they created files on both paths:

app/Livewire/ProductCreate.php
   
resources/views/livewire/product-create.blade.php

Now, both files we will update as below for our contact us form.

app/Livewire/ProductCreate.php

<?php

namespace App\Livewire;

use Livewire\Component;
use App\Models\Product;

class ProductCreate extends Component
{
    public $name, $price, $detail;

    public function render()
    {
        return view('livewire.product-create');
    }

    public function resetForm()
    {
        $this->name = "";
        $this->price = "";
        $this->detail = "";
    }

    /**
     * Write code on Method
     *
     * @return response()
     */
    public function submit()
    {
        $this->validate([
            "name" => "required",
            "price" => "requierd|min:5|numeric",
            "detail" => "required"
        ]);

        $product = Product::create([
            "name" => $this->name,
            "price" => $this->price,
            "detail" => $this->detail
        ]);

        info($product);
    }
}

resources/views/livewire/product-create.blade.php

<div>

    <form wire:submit="submit">
        
        <label>Name:</label>
        <input type="text" name="name" class="form-control" wire:model.change="name">
        @error("name")
        <p class="text-danger">{{ $message }}</p>
        @enderror

        <label>Price:</label>
        <input type="text" name="price" class="form-control" wire:model="price">
        @error("price")
        <p class="text-danger">{{ $message }}</p>
        @enderror

        <label class="mt-1">Detail:</label>
        <textarea class="form-control" wire:model="detail"></textarea>
        @error("detail")
        <p class="text-danger">{{ $message }}</p>
        @enderror

        <button class="btn btn-success mt-3" type="submit">Submit</button>
        <button class="btn btn-danger mt-3" type="button" wire:click="resetForm()" >Reset</button>

    </form>
</div>

Step 2: Use Livewire Component

now, we will user counter component in home page. so you need to update home.blade.php file as the following way:

resources/views/home.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Product Create') }}</div>

                <div class="card-body">
                    <livewire:product-create />
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Run Laravel:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

php artisan serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:8000/

Now, you need to register user and go to dashboard:

I hope it can help you...