Livewire checkboxes selected by default-CodePudding

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 >

     <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

CodePudding user response：

welcome to StackOverflow! 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 >
        <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

CodePudding user response：

Thanks to Laisender I finded what I wanted.

What changed in my component :

    public $counter = 0;
    ...

        foreach($import->getSheetNames() as $index => $sheetName)
        {

            $data = $import->getSheetNames();
            $this->sheets = $data;
            array_push($this->selectedBoxes, "$this->counter");
            $this->counter  = 1;

        }

My view :

                @foreach($sheets as $sheet)

                    <div >

                        <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