CRUD simples com Livewire

php artisan livewire:make Products

<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Product;
class Products extends Component
{
    public $products, $name, $price, $product_id;
    public $isOpen = 0;
    public function render()
    {
        $this->products = Product::all();
        return view('livewire.products');
    }
    public function create()
    {
        $this->resetInputFields();
        $this->openModal();
    }
    public function openModal()
    {
        $this->isOpen = true;
    }
    public function closeModal()
    {
        $this->isOpen = false;
    }
    public function store()
    {
        $this->validate([
            'name' => 'required',
            'price' => 'required|numeric',
        ]);
        Product::updateOrCreate(['id' => $this->product_id], [
            'name' => $this->name,
            'price' => $this->price
        ]);
        session()->flash('message',
            $this->product_id ? 'Produto atualizado com sucesso!' : 'Produto criado com sucesso!');
        $this->closeModal();
        $this->resetInputFields();
    }
    public function edit($id)
    {
        $product = Product::findOrFail($id);
        $this->product_id = $id;
        $this->name = $product->name;
        $this->price = $product->price;
        $this->openModal();
    }
    public function delete($id)
    {
        Product::find($id)->delete();
        session()->flash('message', 'Produto deletado com sucesso!');
    }
    private function resetInputFields()
    {
        $this->name = '';
        $this->price = '';
        $this->product_id = '';
    }
}

<x-slot name="header">
    <h2 class="font-semibold text-xl text-gray-800 leading-tight">
        {{ __('Produtos') }}
    </h2>
</x-slot>
<div class="py-12">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-4">
            @if (session()->has('message'))
                <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" role="alert">
                    <strong class="font-bold">{{ session('message') }}</strong>
                </div>
            @endif
            <button wire:click="create()" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded my-3">Novo Produto</button>
            @if($isOpen)
                @include('livewire.create')
            @endif
            <table class="table-fixed w-full">
                <thead>
                    <tr class="bg-gray-100">
                        <th class="px-4 py-2">Nome</th>
                        <th class="px-4 py-2">Preço</th>
                        <th class="px-4 py-2">Ação</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($products as $product)
                        <tr>
                            <td class="border px-4 py-2">{{ $product->name }}</td>
                            <td class="border px-4 py-2">{{ $product->price }}</td>
                            <td class="border px-4 py-2">
                                <button wire:click="edit({{ $product->id }})" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Editar</button>
                                <button wire:click="delete({{ $product->id }})" class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Deletar</button>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

<x-jet-dialog-modal wire:model="isOpen">
    <x-slot name="title">
        {{ $product_id ? 'Editar Produto' : 'Novo Produto' }}
    </x-slot>
    <x-slot name="content">
        <div class="mt-4">
            <x-jet-label for="name" value="Nome" />
            <x-jet-input id="name" class="block mt-1 w-full" type="text" wire:model="name" />
            @error('name') <span class="error">{{ $message }}</span> @enderror
        </div>
        <div class="mt-4">
            <x-jet-label for="price" value="Preço" />
            <x-jet-input id="price" class="block mt-1 w-full" type="number" wire:model="price" step="0.01" />
            @error('price') <span class="error">{{ $message }}</span> @enderror
        </div>
    </x-slot>
    <x-slot name="footer">
        <x-jet-secondary-button wire:click="closeModal">
            {{ __('Fechar') }}
        </x-jet-secondary-button>
        <x-jet-button class="ml-2" wire:click="store">
            {{ $product_id ? __('Atualizar') : __('Criar') }}
        </x-jet-button>
    </x-slot>
</x-jet-dialog-modal>

Route::livewire('/products', 'products');