Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel – Checkbox text value receive on checkbox check in livewire

In my Livewire View

@foreach ($diagnosisList as $row)
                        <div class="col-6 mb-2">
                            <div class="d-flex align-items-center">
                                <label class="form-check mb-0 w-120px">
                                    <input wire:model.debounce.1000ms='diagnoses.{{ $row->id }}'
                                        data-name="{{ $row->name }}"
                                        class="form-check-input" type="checkbox" value="{{ $row->id }}">
                                    <span class="form-check-label font-13 fw-medium">{{ $row->name }}</span>
                                </label>
                                
                            </div>
                        </div>
                    @endforeach

In my Livewire Class (controller):

public function updatedDiagnoses($value, $id)
    {
        
    }

In livewire, i need to get $row->name in updatedDiagnoses() for checked event and push them into array.
How to do this?

Tags:

2

Answers


  1. 0

    You should post the format of your data, however I assume you have a $diagnosisList array containing the models and a $diagnosis array containing checkbox values ​​indexed by record id

    The only way for your configuration is to read the row from DB :

    public function updatedDiagnosis($value, $id)
{
   $name = Diagnosis::find($id)->name; // I suppose you have a Diagnosis model
}

    I can’t understand the ".debounce.1000ms"
    If you are using Livewire 3 perhaps you should change it with .live to let the backend call happen on change:

    <input wire:model.live="diagnosis.{{ $row->id }}" ..... >

    It would be also advisable to add a wire:key in the @foreach content:

    @foreach ($diagnosisList as $row)
   <div class="col-6 mb-2" wire:key="diag-{{ $row->id }}">
      .....
   </div>
@endforeach
    Login or Signup to reply.
  2. 0

    You need to define a public property in your livewire to hold the array of checked diagnosis names and then update updatedDiagnoses to add/remove the diagnosis name from $checkedDiagnoses base on whether the checkbox is checked/unchecked. You need to pass both value and name of the diagnosis to the updatedDiagnoses using js and then create the updatedCheckedDiagnoses in your livewire:

    Livewire Class (controller)

    namespace AppHttpLivewire;

use LivewireComponent;

class YourComponent extends Component
{
    public $diagnoses = [];
    public $checkedDiagnoses = [];

    public function mount()
    {
        // Initialize the diagnoses array with default values if needed
        foreach ($this->diagnosisList as $diagnosis) {
            $this->diagnoses[$diagnosis->id] = false;
        }
    }

    public function updateCheckedDiagnoses($id, $name)
    {
        if ($this->diagnoses[$id]) {
            // Checkbox is checked, add the diagnosis name to the array
            $this->checkedDiagnoses[] = $name;
        } else {
            // Checkbox is unchecked, remove the diagnosis name from the array
            $index = array_search($name, $this->checkedDiagnoses);
            if ($index !== false) {
                unset($this->checkedDiagnoses[$index]);
            }
        }
    }

    public function render()
    {
        return view('livewire.your-component', [
            'diagnosisList' => Diagnosis::all(), // Assuming Diagnosis is your model
        ]);
    }
}

    Livewire View

    <div>
    @foreach ($diagnosisList as $row)
        <div class="col-6 mb-2">
            <div class="d-flex align-items-center">
                <label class="form-check mb-0 w-120px">
                    <input wire:change="updateCheckedDiagnoses({{ $row->id }}, '{{ $row->name }}')"
                           class="form-check-input" type="checkbox" value="{{ $row->id }}">
                    <span class="form-check-label font-13 fw-medium">{{ $row->name }}</span>
                </label>
            </div>
        </div>
    @endforeach
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search