Can't reset/change variable value in Volt component. [Solved]

Below is a quick demonstration I wrote to show the issue. Normally all three lines inside the testMethod should reset the value of $string variable. But when I submit the form, even though it shows the $writeHere text inside the span, it doesn't clear the input.

Am I doing something wrong? This is the only volt component on the page, there's nothing that can interrupt it from resetting it.

Similarly $this->string = 'test'; also doesn't work in the testMethod

<?php

use Livewire\Volt\Component;

new class extends Component {
    public $string = '';
    public string $writeHere = '';

    public function testMethod(){
        $this->writeHere = $this->pull('string');
        $this->string = '';
        $this->reset('string');
    }
}; ?>

<div>
    <form wire:submit.prevent="testMethod"
        class="flex flex-col items-center justify-center gap-3 py-4">
        <input type="text" wire:model="string">
        <button type="submit">Submit</button>
        <span>{{ $writeHere }}</span>
    </form>
</div>

This example in the gif is running the code above.

Volt not resetting variable value

Found the bug

I installed this app with Breeze starter kit, which includes AlpineJs and imports it in the app.js file. And I wasn't smart enough to check dev tools console before making this post. So I didn't notice the error log saying Detected multiple instances of Alpine running. I commented out three lines that import alpinejs in the app.js file and everything started working fine. I often forget there is javascript magic happening in the background because I'm writing php code.

And this is not even the first time this bug haunts me.

RemiM

1 year ago

Level 16

You are using the pull()method who retrieve a form's properties and reset them in one operation, so, after you call pull(), $string is already empty, and when you later call $this->reset('string'), it's redundant because the value has already been removed by pull().

Working solution:

new class extends Component {
    public $string = '';
    public string $writeHere = '';

    public function testMethod(){
        $this->writeHere = $this->string;
        $this->reset('string');
    }
};

Also, you don't need to preventas it's already include in the wire:submit directive.

motinska94

1 year ago

Level 3

@RemiM I purposefully wrote three lines that are supposed to clear the $string variable to emphasize my point. None of them are changing it, not together, not individually. Even the code below doesn't reset the value of the input.

    public function testMethod(){
        $this->string = '';
    }

motinska94

1 year ago

Level 3

@RemiM Just saw your edit and copy pasted that exact code on my component, it's still not resetting the input. If it does work for you, I think I messed up something during the livewire or volt installation process. I'll try it on a fresh project now.

RemiM

1 year ago

Level 16

@motinska94 Yeah, I was thinking it could be even simplified.

Anyway, I have a working example here, without Volt but the logic is the same:

Class:

<?php

namespace App\Livewire;

use App\Models\Greeting;
use Livewire\Attributes\Validate;
use Livewire\Component;

class Greeter extends Component
{
    #[Validate('required|min:2')]
    public $name = '';

    public $greeting = '';
    public $greetings = [];
    public $greetingMessage = '';

    public function changeGreeting()
    {
        $this->reset('greetingMessage');

        $this->validate();

        $this->greetingMessage = "{$this->greeting}, {$this->name}!";
    }

	    public function mount()
    {
        $this->greetings = Greeting::all();
    }
	...
}

Blade part:

<form wire:submit="changeGreeting()">
        <div class="mt-2">
            <select type="text" class="p-4 border rounded-md bg-gray-300 text-black" wire:model.fill="greeting">
               @foreach ($greetings as $item)
                   <option value="{{$item->greeting}}">
                    {{$item->greeting}}
                   </option>
               @endforeach
            </select>
            <input type="text" class="p-4 border rounded-md bg-gray-300 text-black" wire:model="name">
        </div>
        <div>
            @error('name')
                {{ $message }}
            @enderror
        </div>
        <div class="mt-2">
            <button type="submit" class="text-white font-medium rounded-md px-4 py-2 bg-blue-600">Greet</button>
        </div>
    </form>

1 like

motinska94

1 year ago

Level 3

@RemiM Well, it looks like I sure did mess something up during the installation process. Because now even the original code on my post is working in this component on a fresh project. I have no idea what I did wrong though. Will update the post if I figure it out in case anyone else runs into the same problem.

Thanks!

Please or to participate in this conversation.