Livewire 组件转换为另一个 livewire 组件

Posted 2023-02-22

【中文标题】Livewire 组件转换为另一个 livewire 组件

【英文标题】：Livewire component into another livewire component

【发布时间】：2021-09-14 04:47:44

【问题描述】：

我有一个包含几张卡片的 livewire 概览组件。在这些卡片中有一个 livewire 表单，但是当我将表单包含到概述组件中时，我的整个 livewire 停止工作..

我要添加到概览组件文件中的唯一一行是：

@livewire('apply-form')

当我删除该 livewire 方法时，一切都会再次正常运行，但我的概览组件中也需要该表单..

我做错了什么吗，或者有人可以帮我解决这个奇怪的“错误”吗？

不知道我的 livewire 版本，但资产已过时。

livewire 也没有给出错误。

Main component where we include the other component that crashes the rest

使其余部分崩溃的 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';

        // Upload cv
        $this->cv->storeAs('cvs', $cvRandom);

        Mail::to('[e-mail]')->send(new ApplyMail([$validated, $cvRandom]));

        // Reset the values after a form submit
//        $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');
    

【问题讨论】：

由于前端发生了很多 Livewire，开发控制台（Inspect 元素）中是否有任何错误？此外，您还没有向我们提供组件刀片视图。您是否为此使用单个根元素？

嵌套组件中的代码必须放到div容器中

【参考方案1】：

在嵌套组件时尝试按照the documentation 中的建议为该 livewire 组件添加一个键

@livewire('apply-form', ['vacaturnaam' => $vacancy->title], key($vacancy->id))