CODEWITHSUNDEEP
laravel-livewire
Omer Stimpack
Omer Stimpack

Reputation: 111

Automatically set value of select input field with dynamic input with Livewire

I want to set by default a value for select tag each time i click the button "Ajouter paiement" however when i add selected="selected" livewire does not recognize it.

how can i pass the value 1 to livewire each time i click the button by default?

dynamic input

here's the code:

                <div class="form-group">
                    <select id="" class="form-control" wire:model="status_paiement.{{ $key }}" oninvalid="this.setCustomValidity('Ce champ est obligatoire')" onchange="this.setCustomValidity('')" required>
                     
                        <option value="1" selected="selected">regler</option>
                        <option value="0" >encours</option>

                    </select>
                    @error('status_paiement.'.$value)  {{ $message }}@enderror
                </div>
            </div>```

Upvotes: 1

Views: 1302

Answers (1)

Arcaz
Arcaz

Reputation: 53

I have the same problem. I will try to explain what I did to solve this problem.

Separate your form to another livewire component

foreach($payments as $payment){
    @livewire('payments.update-form',['payment' => $payment,'key'=>$payment['id']]) //pass a key to uniquely identify this component
}

<?php

namespace App\Http\Livewire\Payments;

use Livewire\Component;

class paymentsUpdateForm extends Component
{
    public $payment= [];
    public $status = 'pending';

    public function mount($payment){
        $this->payment= $payment; //This will set the current payment
        $this->status = $payment['status']; //This will set the default status of the current payment
    }
    public function render()
    {
        return view('livewire.payments.update-form');
    }
}

This is what livewire/payments/update-form looks like

...
<select wire:model="status">
    <option value="1">regler</option>
    <option value="0">encours</option>
</select>
...

Each iteration will create a new Laravel component with the given payments and key. Inside the mount function of the Laravel component, assigns payment using the given data from the parent component and set the default payment status on the current payment. Hope you understand my explanation and this will help you. Cheers!

Upvotes: 1

Related Questions