Level 31
Start by changing the following
<html>
<head>
...
//@livewireStyles()
@livewireStyles
</head>
@yield('wrapper')
//@livewireScripts()
@livewireScripts
...
</html>
Apr 26, 2023
8
Level 7
Livewire wire:id and nested layouts
I have created a base layout, with my head and footer and then have extended that layout to add in an aside that slides in. I then extended that layout to create my inner layouts – the goal is create multiple layouts that can be used.
My issue is that when I create a full-page Livewire component, and use the later layout, the wire:id is not getting set on any of the content in sections other than what is put in the {{$slot}}. This causes issues when I put filters or a search input in one of the sections as the component is not recognizing any updates to the property.
Wrapping a div around all sections and adding a wire:key does not work, as it puts that into the slot, since it's not within a section.
Is there something I can do differently to make this work, or would it simply be best to move the last layout to a blade component so I'm only using the slot?
// Example Base
<html>
<head>
...
@livewireStyles(['nonce' => csp_nonce()])
</head>
@yield('wrapper')
@livewireScripts(['nonce' => csp_nonce()])
...
</html>
// Example Wrapper
@extends('example_base')
@section('wrapper)
<div class="content_wrapper">
<div id="main">
@yield('content')
</div>
<aside id="asidePanel">
@yield('aside')
</aside>
</div>
@endsection
// Example Layout
@extends('example_wrapper')
@section('content')
<div>
<div>
@yield('left-column')
</div>
<div>
{{ $slot }}
</div>
<div>
@endsection
// Example Full-Page Livewire Component View
@section('left-column')
<input wire:model="search" type="text" />
@endsection
// the slot
<div>
@forelse($results as $result)
<div wire:key="result{{ $id }}_{{ now()->timestamp }}">{{$result}}</div>
@empty
@endforelse
<div>
@section('aside')
... // another livewire component
@endsection
Level 7
@migsAV I have updated my original code.
I'm passing a nonce to livewire. I've tried with and without the nonce.
Checking the DOM, it's absolutely the issue I described. The wire:id is only present on the code within the last {{ $slot }}.
Level 31
@whoisthisstud try wrapping the slot section with a div
<div>
@section('left-column')
<input wire:model="search" type="text" />
@endsection
// the slot
@forelse($results as $result)
<div>{{$result}}</div>
@empty
@endforelse
@section('aside')
... // another livewire component
@endsection
</div>
Level 7
@migsAV that was the first thing I tried. 😞
Level 31
@whoisthisstud I changed my reply
Level 7
@migsAV I updated the original code.
The slot does have a wrapping div and each individual index defines a wire:key.
Three years of FT use in the TALL stack and never had this issue, but I've also never attempted to setup my layouts in this manner with a full-page Livewire component, either.
My DOM reflects what I've described – only the livewire properties within the slot have the necessary wire:id, and moving my search field into the slot it works as intended.
Level 7
I opted to use slotted blade components for my individual final layouts, and doing so solved the issue.
1 like
Level 31
Happy to hear you came right :) set your reply as the best so people know it's resolved
Please or to participate in this conversation.