jcergolj/laravellte

@props(['user', 'livewire'])

<li class="list-group-item" x-data="{ show: false}"  @close.window="show = false" x-cloak>
    <div class="row" x-show="!show" x-transition:enter="fade">
        {{ $element }}

        <div class="col-4 col-md-4">
            <a href="#" class="float-right" x-on:click="show = true">Edit</a>
        </div>
    </div>

    {{ $livewire }}
</li>

// ...

<ul class="list-group list-group-unbordered mb-3">
    <x-profile.element :user="$user">
        <x-slot name="element">
            <div class="col-md-12">
                <b>Email</b>
            </div>
            <div class="col-8 col-md-8">
                {{ $user->email }}
            </div>
        </x-slot>

        <x-slot name="livewire">
            <livewire:profile.update-email />
        </x-slot>
    </x-profile.element>
    // ...
</ul>

// ...