Livewire component into another livewire component

Viewed 1501

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');
    }
}
2 Answers

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))

if you are writing nested livewire component with loop or without then you have to pass key to every component else it will generate error because of so many component rendering at the same time you can do like this:

 <livewire:product-wishlist :wishlistproduct="$product" :key="time() . rand(0, 999)" />

Like this you can add key with random number generate so it will not conflict

Related