phplaraveleloquentlaravel-livewire

How to include a livewire component in another livewire component


I have a livewire overview component that contains a couple of cards. In those cards there is a livewire form, however when I include the form into the overview component my entire livewire stops working..

The only line that I am adding into my overview component file is this:

@livewire('apply-form')

When I remove that livewire method everything works fine again, but I need that form in my overview component also..

Is there anything I am doing wrong, or can someone help me out with this strange 'bug'?

Don't know my livewire version, but assets are out of date.

There is also no error(s) given by livewire.

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

Code of the livewire component that crashes the rest:


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('info@nlconnekt.nl')->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');
    }
}

Solution

  • Try adding a key to that livewire component as suggested in the documentation when nesting components

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