vincent15000's avatar

AlpineJS and Livewire 2 => @entangle not working

Hello,

I'm searching for hours why @entangle doesn't work.

x-data="{
	readyToUpload: @entangle('readyToUpload'),
	progress: 0
}"

Any idea ?

What am I doing wrong ?

Thanks for your suggestions.

V

0 likes
10 replies
tykus's avatar

What does the Livewire component class look like?

1 like
vincent15000's avatar

@tykus Do you need more informations ?

class DocumentsListe extends Component
{
    use WithFileUploads;

    public $doctype_id = null;
    public $formation_id;
    public $document = null;
    public $nombreRestant;
    public $fichier = null;

    public $readyToUpload = false;

	...
}
tykus's avatar

@vincent15000 thanks, seems ok. I should have also asked what is not working? How are you using the $readyToUpload Livewire property and readytoUpload Alpine data property?

Are there console errors?

1 like
vincent15000's avatar

@tykus I get an error an error in the console saying that Alpine property readyToUpload is not defined, pointing to this line : readyToUpload: @entangle('readyToUpload'),.

And I get an alert saying that AlpineJS has already been loaded, but I already got this alert in previous applications and all worked fine.

And here are some pieces of code in the Livewire class and in the view.

public function upload()
{
    //$formation = Formation::find($this->formation_id); => si l'on souhaite donner le nom de la formation au fichier
    if ($this->readyToUpload && $this->document) {
        $doctype = Doctype::find($this->doctype_id);
        $fichier = $this->document->storeAs('documents/'.$this->formation_id, Str::snake($doctype->nom).'.pdf', 'local');
        $document = new Document;
        $document->fichier = $fichier;
        $document->doctype_id = $this->doctype_id;
        $document->formation_id = $this->formation_id;
        $document->save();
        $this->resetFields();
    }
}
<form
	class="space-y-4 @if ($nombreRestant == 0) hidden @endif"
	wire:submit.prevent="upload"
	x-data="{
		isUploading: false,
		readyToUpload: @entangle('readyToUpload'),
	}"
    x-on:livewire-upload-start="isUploading = true;"
    x-on:livewire-upload-finish="isUploading = false; readyToUpload = true;"
	x-on:livewire-upload-error="isUploading = false;"
>

What I'm trying to do is only detecting any error because I get sometimes an incomplete uploading which generates errors then while trying to read the uploaded file.

tykus's avatar

@vincent15000 what's the property, readyToUpload or isReadyToUpload; the x-data on the form entangles the latter?

1 like
vincent15000's avatar

@tykus Sorry it was a typo just here on Laracast, I have updated the comment, it's readyToUpload.

I really on't understand why it doesn't work.

Please or to participate in this conversation.