如何在 2 个 livewire 文件中定义 2 个 alpines 组件

Posted 2023-03-07

【中文标题】如何在 2 个 livewire 文件中定义 2 个 alpines 组件

【英文标题】：How to define 2 alpines components in 2 livewire files

【发布时间】：2021-03-17 04:08:12

【问题描述】：

在 laravel 7 /livewire 1.3 / alpinejs 2 项目中，我制作了 crud，当 为了添加/编辑，我将 livewire.admin.app-news.form 包含在数据列表中（resources/views/livewire/admin/app-news/container.blade.php）： 在这个文件中定义了 adminNewsComponent：

<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

adminNewsComponent 的所有方法和数据都可以正常工作，但问题是当我打开编辑器时 带行的表格：

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

我无法在 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() 

我明白了

ReferenceError: adminNewsEditorComponent is not defined.

我想原因是这里使用了@include(，实际上我想要不同的文件 并定义了 2 个不同的组件。

如何解决？

谢谢！

【问题讨论】：

请不要改变你的问题的范围，尤其是在它得到回答之后。如果您对答案有新问题，请ask a new question

【参考方案1】：

我遇到过类似的问题。我先解释一下原因。 Blade push 适用于第一次渲染，因此当我们使用 if 条件动态加载组件时，推送将不起作用。

换句话说，如果$updateMode = 'edit' or 'add' 在第一次渲染期间，那么推送会将脚本添加到布局中。如果不是，它将不适用于使用 livewire 进行的连续渲染。

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

所以唯一的解决方案是将推送脚本移动到container.blade.php。那么这个错误就可以解决了。