如何在Livewire组件中嵌入其他Livewire组件及嵌入后功能失效排查

问题描述 #

我有一个Livewire概览组件，内部包含若干卡片，需要在卡片中嵌入一个Livewire表单，但是把表单嵌入概览组件后，所有Livewire功能都停止运行了。
我在概览组件文件里只加了一行代码：
@livewire('apply-form')
把这行代码移除后所有功能就恢复正常，但我确实需要在概览组件里使用这个表单，请问是我操作有问题吗？怎么排查这个奇怪的问题？
目前不清楚使用的Livewire版本，资源文件已过期，Livewire也没有抛出任何错误提示。

出问题的子组件代码如下：

namespace App\Http\Livewire;

use Illuminate\Support\Facades\Mail;
use Livewire\Component;
use App\Mail\ApplyMail;
use Livewire\WithFileUploads;

class ApplyForm extends Component
{
    use WithFileUploads;

    public $voornaam;
    public $achternaam;
    public $woonplaats;
    public $geboortedatum;
    public $emailadres;
    public $telefoonnummer;
    public $vacaturenaam;
    public $cv;

    protected $rules = [
        'voornaam' => 'required|max:10',
        'achternaam' => 'required|max:10',
        'woonplaats' => 'required|max:10',
        'geboortedatum' => 'required|date',
        'emailadres' => 'required|e-mail',
        'telefoonnummer' => 'required|numeric',
        'vacaturenaam' => 'required',
        'cv' => 'required|mimes:pdf'
    ];

    public function submit()
    {
        $validated = $this->validate();

        $cvRandom = rand(1, 9999999) . '.pdf';

        // 上传简历
        $this->cv->storeAs('cvs', $cvRandom);

        Mail::to('info@nlconnekt.nl')->send(new ApplyMail([$validated, $cvRandom]));

        // 表单提交后重置字段
//        $this->voornaam = '';
//        $this->achternaam = '';
//        $this->woonplaats = '';
//        $this->geboortedatum = '';
//        $this->emailadres = '';
//        $this->telefoonnummer = '';

        return session()->flash('message', 'Bedankt voor uw sollicitatie. Wij nemen z.s.m contact met u op');
    }

    public function render()
    {
        return view('livewire.apply-form');
    }
}

排查方案 #

• 首先修正代码里的明显错误：验证规则中邮箱字段的规则写错了，Laravel原生的邮箱验证规则是email不是e-mail，错误的验证规则会触发未捕获的异常，关闭调试模式的情况下就会表现为功能直接失效无报错。
• 检查所有Livewire组件的DOM结构：每个Livewire组件（包括父概览组件、子表单组件）的Blade模板必须只有一个根元素，如果存在多个并列的根节点，Livewire的DOM diff逻辑会完全失效，导致所有功能崩溃。
• 检查表单标签属性：因为子组件使用了WithFileUploads特性处理文件上传，表单标签必须添加wire:enctype="multipart/form-data"属性，否则文件上传逻辑会触发异常。
• 给嵌入的子组件添加唯一key：如果你的概览页有多个卡片都要嵌入这个表单，必须给每个子组件实例指定唯一的key，写法为@livewire('apply-form', [], key('apply-form-'.$card->id))，否则多个相同组件会导致Livewire实例冲突。
• 修复过期的资源文件：执行以下命令重新发布Livewire静态资源并清理缓存：

  php artisan livewire:publish --assets
  php artisan view:clear
  php artisan cache:clear
  

• 检查Livewire JS加载情况：确认全局布局文件里只加载了一次@livewireScripts，不要在子组件模板里重复加载Livewire的JS文件，重复加载会销毁所有已初始化的Livewire实例。

内容的提问来源于stack exchange，提问作者Boudewijn