How to define 2 alpines components in 2 livewire files

user_10873713 0
Viewed 352

In laravel 7 /livewire 1.3 / alpinejs 2 project I make crud, when for adding/editing I include livewire.admin.app-news.form inside of data listing(resources/views/livewire/admin/app-news/container.blade.php) : in this file adminNewsComponent is defined :

<article class="admin_page_container">
    
    <div class="form-admin-news" x-data="adminNewsComponent()"  x-init="initAdminNewsComponent()" >
        
        <div class="">
            ...
    
            @include('livewire.common.alert_messages')
    
    
            @if($updateMode=='edit' or $updateMode=='add')
                @include('livewire.admin.app-news.form')
            @endif
            
            @if($updateMode=='browse')
                @if(count($newsDataRows) == 0)
                    <div class="alert alert-info" role="alert">
                        No data found
                    </div>
                @endif
                
                @if(count($newsDataRows) > 0)
                    
                    <div class="table-responsive table-wrapper-for-data-listing" x-data="selectedNewsIdsBoxXData()">
                        DATA LISTING
                    </div> <!-- <div class="table-responsive table-wrapper-for-data-listing"> -->
                
                @endif {{-- @if(count($newsDataRows) > 0) --}}
            @endif {{-- @if($updateMode=='browse')  --}}
        </div> <!-- <div class=""> -->
        
        
        <section class="mt-2">
            @if($updateMode=='browse' and count($newsDataRows) > 0)
                {{ $newsDataRows->links() }}
            @endif
        </section>
    
    </div> <!-- <div class=""> -->
</article> <!-- page_content_container -->

@push('styles')
    <link href="/css/quill.snow.css" rel="stylesheet">
@endpush

@push('scripts')
    <script src="{{ asset('/js/quill.js') }}"></script>
@endpush

@push('scripts')
    <script>
        function selectedNewsIdsBoxXData() {
            console.log('!!!selectedNewsIdsBoxXData::')
                ...
        }


        function adminNewsComponent() {

            ...

        } // function adminNewsComponent() {



    </script>
@endpush

all methods and data of adminNewsComponent works ok but the problem is that when I open editor form with line :

@if($updateMode=='edit' or $updateMode=='add')
    @include('livewire.admin.app-news.form')
@endif

I can not define similar component inside of resources/views/livewire/admin/app-news/form.blade.php :

<article>
    
    @inject('viewFuncs', 'App\library\viewFuncs')
    
    <form class="form-editor" @if($updateMode=='edit')  wire:submit.prevent="update"
          @else  wire:submit.prevent="store" @endif >
        <div class="card" x-data="adminNewsEditorComponent()" x-init="initAdminNewsEditorComponent()" >
            <div class="card-body card-block">

                ...
    
    
                @section('scripts')
                <script>


                    function adminNewsEditorComponent() {

I got

ReferenceError: adminNewsEditorComponent is not defined.

I suppose the reason is that @include( is used here and actually I would like to different files and 2 different components defined.

How that coulkd be fixed ?

Thanks!

alpine.js laravel-livewire
1 Answers

I've faced a similar issue like this. Let me explain the cause first. Blade push works for the first render so that when we dynamically load a component with an if condition, the push will not work.

In other words, if the $updateMode = 'edit' or 'add' during the first render, then the push will add the scripts to the layout. If not it will not work with the consecutive renders with livewire.

@if($updateMode=='edit' or $updateMode=='add')
    @include('livewire.admin.app-news.form')
@endif

So the only solution is to move the push scripts to the container.blade.php. then this error can be resolved.

user_101705850
Related