Level 2
OK, I found the solution, just add .live after @entangle directive like this :
selectedCategory: @entangle('selectedCategoryId').live
1 like
Hello, I'm building an app based on laravel 11 and livewire 3, I'm used to Livewire and from the beginning of this new project @entangle is not working what do I missed ? The value of $selectedCategoryId is not updated when I change the select but the alpine value is correctly changed when I check in the devtools, so the value does not go back to the controller.
<?php
namespace App\Livewire;
use Livewire\Component;
class SelectCategoryAndType extends Component
{
public mixed $categories ;
public mixed $types;
public $selectedCategoryId;
public function mount()
{
$this->categories = \App\Models\Categorytype::orderBy('name')->get();
$this->selectedCategoryId = $this->categories[2]->id;
$this->getOperationsTypes($this->selectedCategoryId);
}
public function updatedSelectedCategoryId()
{
$this->getOperationsTypes($this->selectedCategoryId);
}
public function getOperationsTypes(int $categoryId)
{
$this->types = \App\Models\Operationstype::where('categorytype_id', $categoryId)->get();
}
public function render()
{
return view('livewire.select-category-and-type');
}
}
here is the view
<div class="col-span-2 w-full"
x-data="{selectedCategory: @entangle('selectedCategoryId')}"
>
<div class="col-span-2 w-full">
<label for="category_id" class="">Catégorie<span class="mandatory">*</span></label>
<select x-model="selectedCategory" id="category_id" name="category_id" class="">
@foreach($categories as $category)
<option {{ $selectedCategoryId===$category->id ? 'selected' : '' }} value="{{ $category->id }}">{{ $category->name }}</option>
@endforeach
</select>
<p class="mt-3 text-sm leading-6 text-gray-500"></p>
</div>
<div class="col-span-2 w-full">
<label for="operationtype_id" class="">Type d'opération<span class="mandatory">*</span></label>
<select id="operationtype_id" name="operationtype_id" class="">
@foreach($types as $type)
<option value="{{ $type->id }}">{{ $type->name }}</option>
@endforeach
</select>
<p class="mt-3 text-sm leading-6 text-gray-500"></p>
</div>
</div>
OK, I found the solution, just add .live after @entangle directive like this :
selectedCategory: @entangle('selectedCategoryId').live
Please or to participate in this conversation.