How to use "slot" in Livewire for many blades and components

127 Views Asked by At

The main page I have, "master.blade.php", contains the whole code of the dashboard. I want to create new blades and components with the same layout as the master using a slot.

This is a new blade called add-playground.blade.php

<div class="collapse" id="collapseExample">
    <div class="card card-body">
        <div class="card">
            <div class="card-body">
                <form wire:submit.prevent="save">
                    @csrf
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="name" class="form-label">Playground Name</label>
                            <input type="text" class="form-control" id="name" wire:model="name">
                            @error('name')
                            <div class="alert alert-danger mt-2">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="city">City</label>
                            <input type="text" class="form-control" id="city" wire:model="city">
                            @error('city')
                            <div class="alert alert-danger mt-2">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <button class="btn btn-success mt-3" type="submit">Save</button>
                </form>
            </div>
        </div>
    </div>
</div>

And here, the AddPlayground component

class AddPlayground extends Component
{

    public $name, $city,$catchError, $playgrounds;
    public function render()
    {
        $this->playgrounds = Playgrounds::all();
        return view('livewire.add-playground');
    }

    public function save()
    {
        try
        {
            $newPlayground = new Playgrounds();
            $newPlayground->name = $this->name;
            $newPlayground->city = $this->city;
            $newPlayground->save();

        }
        catch (\Exception $e)
        {
            $this->catchError = $e->getMessage();
        }
    }
}

In summary, I want to create many blades and components in the future. I do not want a new blade to create a new master or layout page. I want to connect all blades and components to one layout page with the slot.

0

There are 0 best solutions below