So, I am learning Livewire. I made a small project (Todo) and plan to make it more advanced. The Todo title includes adding, updating, and deleting tasks, and I created my own custom data table. Now, I want to add a checkbox for reminders. If it is checked, a new field appears, allowing the user to select a date and time for the reminder. The issue is that when I update a Todo with the reminder value set to true, the checkbox is not being checked. The backend logic is working because the datetime field appears when the reminder value is true. Here is my code:
<div x-data="{ isReminder: @entangle('isReminder') }">
<div class="mt-3 transform transition-all"
x-show="isReminder"
x-transition:enter="ease-out duration-300"
x-transition:enter-start="opacity-0 scale-90"
x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="ease-in duration-300"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-90">
<x-label for="remiderDateTime" class="mb-1" value="{{ __('Reminder Date Time') }}" />
<x-custom.datepicker></x-custom.datepicker>
</div>
<div class="mt-4 flex items-center justify-between">
<div class="flex items-center">
<input type="checkbox" name="isReminder" x-model="isReminder" id="checked-checkbox" class="w-4 h-4 rounded" wire:model="isReminder">
<label for="checked-checkbox" class="ms-2 text-sm font-medium dark:text-gray-500">Reminder</label>
</div>
<x-button class="ms-4 bg-gray-700 hover:bg-gray-900">
{{ $isUpdating ? __('Update') : __('Submit') }}
</x-button>
</div>
</div>
Todos.php
public $isReminder = false;
public function editTodo($id)
{
$todo = Todo::find($id);
if ($todo) {
$this->todoToUpdate = $todo->id;
$this->title = $todo->title;
$this->isReminder = $todo->isReminder;
$this->remiderDateTime = $todo->remiderDateTime;
$this->formTitle = 'Edit Todo';
$this->isUpdating = true;
}
}