Livewire checkboxes selected by default

Question

What I would like :

• By default check all checkboxes
• Get the value sheet id for later

First issue :

• Is it possible to sort / order them by id ?
  Because for the moment it orders them by the order of check.
  screenshot 2

If someone can help me I would be glad thanks :D

Here is my view :

@foreach($sheets as $sheet)

  <div class="inputGroup">

     <input id="{{$loop->index}}" wire:model="selectedBoxes" type="checkbox" value="{{$loop->index}}" checked/>
     <label for="{{$loop->index}}">Feuille {{$loop->index+1}}: {{$sheet}}</label>

  </div>
@endforeach

Here are the results when I dd($sheets) :

^ array:4 [▼
  0 => "All ValueRAM FURY"
  1 => "Non-ECC ValueRAM"
  2 => "All FURY"
  3 => "KSM (Server Premier)"
]

Here is my component :

public $sheets = [];
public $selectedBoxes = [];

...
    public function readExcel()
    {
        ...

        $data = [];

        // Return an import object for every sheet
        foreach($import->getSheetNames() as $index => $sheetName)
        {
            $data = $import->getSheetNames();
            $this->sheets = $data;
        }
     }

Website view :
screenshot 1

Answer 1

You could remove the checked tag from your select and let wire:model do it's thing:

public $sheets = [
        0 => "All ValueRAM FURY",
        1 => "Non-ECC ValueRAM",
        2 => "All FURY",
        3 => "KSM (Server Premier)"
    ];

// wire:model will ensure that all are checked by default.
public $selectedBoxes = [true, true, true, true];

and in your view: (Take a look at the wire:model property and the checked attribute is gone)

@foreach($sheets as $sheet)
    <div class="inputGroup">
        <input id="sheet-{{$loop->index}}"
               wire:model="selectedBoxes.{{ $loop->index }}"
               type="checkbox"
               value="{{$loop->index}}" />
        <label for="sheet-{{$loop->index}}">Feuille {{$loop->index+1}}: {{$sheet}}</label>
    </div>
@endforeach