Uncaught 在依赖选择表单的 DOM 树中找不到 Livewire 组件

Question

我尝试使用 Laravel 和 Livewire 制作一个依赖表单，根据另一个的选定值填充其中一个。当我在第一个选择中选择值时，JS 控制台给出消息“Uncaught Could not find Livewire component in DOM tree”。

这是我的文件

应用程序/Livewire/SearchProducto.php

<?php

namespace App\Livewire;

use App\Models\Lineas;
use Livewire\Attributes\Computed;
use Livewire\Component;
use Illuminate\Support\Facades\DB;

class SearchProducto extends Component
{

    public $lineaID;
    public $versionID;
    public $categoriaID;

    #[Computed()]
    public function lineas()
    {
        return Lineas::all();
    }

    #[Computed()]
    public function versiones()
    {
        $versiones = DB::table('productos')
        ->select(DB::raw('distinct versions.id, versions.nombre as version'))
        ->leftjoin('versions', 'versions.id', '=', 'productos.version_id')
        ->where('productos.linea_id', '=', $this->lineaID)
        ->get();

        return $versiones;
    }

    public function render()
    {
        return view('livewire.search-producto');
    }
}

资源/视图/livewire/search-producto.blade.php

@extends('layouts.maestro', ['head' => 'Productos'])

@section('content')
@livewireScripts
<div>
    <select wire:model.live="lineaID">
        <option value="">Línea</option>
        @foreach ($this->lineas as $linea)
            <option wire:key="{{ $linea->id }}" value="{{$linea->id}}">{{$linea->nombre}}</option>
        @endforeach
    </select>
    <select wire:model="versionID">
        <option>Versión</option>
        @foreach ($this->versiones as $version)
            <option wire:key="{{ $version->id }}" value="{{$version->id}}">{{$version->version}}</option>
        @endforeach
    </select>
</div>
    
@endsection

routes/web.php 中的行是

Route::get('/searchProducto', SearchProducto::class);

我修改了 app/config/livewire.php 中的下一行

'layout' => 'layouts.app',

'inject_assets' => false,

如果我在layout.app中使用@livewireScripts，控制台会给出消息“检测到正在运行的Livewire的多个实例”，这就是为什么我将它们放在表单视图中。我用微风启动了我的应用程序，因此我从 resources/js/app.js 中删除了对 Alpine 的相应调用。

在给我已经提到的消息之前，JS 控制台给我以下警告：“Livewire：发现缺少结束标记。确保您的模板元素包含匹配的结束标记。”，但这只是一个警告。

在 Blade 中，我跳入中间布局（'maestro.blade.php'），然后跳入 app.blade.php。我感谢您提前提供的任何帮助，并对我的英语感到抱歉，我不是母语人士。

我尝试使用 Laravel 和 Livewire 制作一个依赖表单，根据另一个的选定值填充其中一个。

Answer 1

如果对任何人都有用：我的这种方法是错误的。我尝试遵循 tutorial ，但我的数据模型不适合这样做，因为我没有将实体相互关联（linea/version），而是通过第三个实体（producto）关联。我不确定是为了什么，但从来没有工作过。

因此，我尝试采用不同的方法，在具有类似问题的另一个线程的指导下：我为每个实体创建了不同的 livewire 组件，并更新了发出事件的相应组件。

应用\Livewire\搜索\SelectLinea.php

use App\Models\Lineas;
use Livewire\Component;

class SelectLinea extends Component
{
    public $selectedLinea;

    public function updatedSelectedLinea($id)
    {
        $this->dispatch('lineaSelected', lineaId: $this->selectedLinea);
    }

    public function render()
    {
        $lineas = Lineas::all();
        return view('livewire.search.select-linea', compact('lineas'));
    }
}

应用程序\Livewire\搜索\SelectVersion.php

use Livewire\Attributes\On;
use Livewire\Component;
use Illuminate\Support\Facades\DB;

class SelectVersion extends Component
{
    public $selectedLinea;
    public $selectedVersion;

    #[On('lineaSelected')]
    public function setLinea($lineaId)
    {
        $this->selectedLinea = $lineaId;
    }

    public function render()
    {
        $versiones = DB::table('productos')
        ->select(DB::raw('distinct versions.id, versions.nombre'))
        ->leftjoin('versions', 'versions.id', '=', 'productos.version_id')
        ->where('productos.linea_id', '=', $this->selectedLinea)
        ->get();

        return view('livewire.search.select-version', compact('versiones'));
    }
}

我创建了一个常规刀片视图，其中组合了所有带电组件：

@section('content')
<div>
    <livewire:search.select-linea></livewire:search.select-linea>
    <livewire:search.select-version></livewire:search.select-version>
</div>
@endsection

每个组件都是不同的选择元素

<div class="col-md-5">
    <div class="form-group">
        <select id="linea" wire:model.live="selectedLinea" class="form-control">
            <option value="" selected>---Línea---</option>
            @foreach ($lineas as $linea)
            <option wire:key="{{ $linea->id }}" value="{{ $linea->id }}">{{ $linea->nombre }}</option>
            @endforeach
        </select>
    </div>
</div>