How does one use something like:
<x-form-input type="checkbox" value="1" />
Within a table of items to update that row that it’s complete? Basically a table of tasks and each row as a checkbox to complete that task, but how does this hook up to the Livewire class without any buttons etc?
You can do the following
inside your blade file:
<x-form-input type="checkbox" wire:model="checked"/>
inside your component:
...
public $checked = false;
public function rendre()
{
if ($checked) {
$model->update(['complete' => 1]);
return $something; // alert for example (if you want)
}
....
}
...
But there is and will be more than one checkbox.
Can you provide the full code?
@foreach($tasks as $task)
<tr>
<td class="px-6 py-4 whitespace-no-wrap">
<div class="text-sm leading-5 text-gray-900">
<x-form-input
type="checkbox"
wire:model="taskComplete({{ $task->id }})"
class="form-checkbox border-cool-gray-300 block transition duration-150 ease-in-out sm:text-sm sm:leading-5"/>
</div>
</td>
<td class="px-6 py-4 whitespace-no-wrap">
<div class="flex items-center">
<div class="text-sm leading-5 font-medium text-gray-900">
{{ $task->body }}
</div>
</div>
</td>
</tr>
@endforeach
A table with results and I want to be able to check an item as complete and update the database row accordingly.
Livewire class:
class Tasks extends Component
{
public $taskComplete = [];
public function updatetaskComplete()
{
ddd('Completed?');
}
public function render()
{
$tasks = TaskModel::isOwner();
return view('livewire.tasks', [
'tasks' => $tasks
]);
}
}
I’m using (or at least hoping to use the updated hook) but the dd() isn’t showing when checking a checkbox
I have an idea but [not tested] yet, using Aplinejs to emitting an event to the livewire component and based on that do the logic
<x-form-input @click="taskcomplete({{$task->id}})" />
<script>
function taskComplete(taskId) {
window.livewire.emit('taskCompleteMethodName', taskId)
}
</script>
...
protected $listners = ['taskCompleteMethodName'];
function taskCompleteMethodName($id) {
// do the rest.
}
...
Nope that doesn’t work nothing happens and no errors either, not even sure you can use @click on a checkbox
It’s documented I guess
Yeah, but still to no avail unfortunately.
So I’m still unable to check a checkbox on the row in the html table and have it set the database row to completed.
Anyone else have any ideas?
Hi @istables
I was having same issue, you need to Declares a new component scope for AlpineJS to work.
<div x-data="isOpen = false">
<x-form-input @click="taskcomplete({{$task->id}})" />
</div>
<script>
function taskComplete(taskId) {
window.livewire.emit('taskCompleteMethodName', taskId)
}
</script>Hi @lstables,
I think you should be able to handle this without needing to use events. If you have a wire:model like you do but don’t pass a function pass a property (and make sure it’s an array). Then update your input to this:
<x-form-input
type="checkbox"
wire:model="completedTasks"
class="form-checkbox border-cool-gray-300 block transition duration-150 ease-in-out sm:text-sm sm:leading-5"
value="{{ $task->id }}
/>
Whenever that checkbox is selected that $task->id will be added to the $completedTasks array in your component. Then if you listen for changes to that element (your above code was slightly wrong. It was prefixed with update not updated.
Then add this to your component class:
public $completedTasks = [];
public function updatedCompletedTasks($value)
{
// Perform your update here. If you have multiple selected and only want to update the latest one you can compare $value against $this->completedTasks to find the new $task->id and update it.
}
You could also name your function updatingCompletedTasks if you wanted to perform the update before updating the UI.
Hope this was helpful?
Thanks, i’ll give this a try & report back.
This still doesn’t work or show any errors, can’t even dd() within the updatedCompletedTasks method, like it’s not been called.