1. Anuncie Aqui ! Entre em contato fdantas@4each.com.br

Livewire radio buttons value gets overwritten?

Discussão em 'Outras Linguagens' iniciado por Akif, Outubro 16, 2024 às 16:52.

  1. Akif

    Akif Guest

    When i have a mini multistep form the radio button value of step 2 is overwriting the value of step 1. See code below.

    [​IMG]

    The component

    <?php
    // app/Livewire/Counter.php
    namespace App\Livewire;

    use Livewire\Component;

    class Counter extends Component
    {
    public $count = 1;
    public $one;
    public $two;

    public function increment()
    {
    $this->count++;
    }

    public function decrement()
    {
    $this->count--;
    }


    public function render()
    {
    return view('livewire.counter');
    }
    }



    The view

    <div>
    <div class="p-10">
    <button wire:click="decrement" class="bg-green-500 p-4">-</button>
    <button wire:click="increment" class="bg-green-500 p-4">+</button>

    <h1>Count: {{ $count }}</h1>

    <br>

    @if ($count == 1)
    <input type="radio" name="page1" wire:model.live="one" value="1">
    <input type="radio" name="page1" wire:model.live="one" value="2">
    <input type="radio" name="page1" wire:model.live="one" value="3">
    @elseif($count == 2)
    <input type="radio" name="page1" wire:model.live="two" value="1">
    <input type="radio" name="page1" wire:model.live="two" value="2">
    <input type="radio" name="page1" wire:model.live="two" value="3">
    @endif

    <br>

    <p>Page one: {{ $one }}</p>
    <p>Page two: {{ $two }}</p>
    </div>
    </div>



    Layout

    <!DOCTYPE html>
    <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel</title>

    <!-- Scripts -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
    <body class="font-sans antialiased">
    <livewire:counter />
    </body>
    </html>


    • Livewire version v3.5.9
    • Laravel version v11.26.0
    • PHP 8.2
    Steps To Reproduce

    1. Create component with below details.
    2. Choose a value for radio button
    3. Confirm the answer is displayed on screen
    4. Go to next step with + button
    5. Choose another value for the second set of radio buttons
    6. Confirm the answer is displayed on screen

    What I expect: The radio buttons on page one and page two should work independently

    What I actually get: The radio button value of step one is overwritten as soon as I pick a value in step two

    Continue reading...

Compartilhe esta Página