Unable to call component method. Public method [updatePassword] not found on component

Question

I am new to Livewire and have been struggling with these and couldn't find a way. I want to send a post request so that the user can update the password.

The post method will be from /profile/update-password route

I also followed the documentation and tried to submit a form. Check out the link https://livewire.laravel.com/docs/forms

user-profile.blade.php

      
      <livewire:components.navigation.top-nav />

      <livewire:components.navigation.header />

      <main>
        <div class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
          <!-- Content -->
          
            <!-- Notifications -->
            @include('livewire.components.user-profile')
            <!-- End of Notifications -->
        </div>

        <livewire:components.footer />

      </main>
    </div>

    </body>
    </html>

user-profile.blade.php in components folder

                @csrf
                @method('POST')

                <div class="grid gap-6 mb-6 md:grid-cols-3">

                    <div>
                        <label for="new-password" class="block mb-2 text-sm font-medium text-gray-900">
                            New Password
                        </label>
                        <input type="password" wire:model="new_password"
                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:outline-blue-500 focus:border-blue-500 block w-full p-2.5"
                            placeholder="New Password">
                        <div>
                            @error('new_password') <span class="error">{{ $message }}</span> @enderror
                        </div>
                    </div>
                    <div>
                        <label for="confirm-password" class="block mb-2 text-sm font-medium text-gray-900">Confirm
                            Password</label>
                        <input type="password" wire:model="confirm_password"
                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:outline-blue-500 focus:border-blue-500 block w-full p-2.5"
                            placeholder="Confirm Password">
                    </div>
                    <div>
                        <label for="current-password" class="block mb-2 text-sm font-medium text-gray-900">Current
                            Password</label>
                        <input type="password" wire:model="current_password"
                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:outline-blue-500 focus:border-blue-500 block w-full p-2.5"
                            placeholder="Current Password">
                    </div>

                </div>

                <button type="submit"
                    class="text-white bg-blue-700 cursor-pointer hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center">Update
                    Password</button>

            </form>

UserProfile.php

namespace App\Livewire;

use Livewire\Component;
use Livewire\Attributes\Validate;
use Illuminate\Support\Facades\Auth;

class UserProfile extends Component
{
    #[Validate('required')]
    public $new_password;
    
    #[Validate('required')]
    public $confirm_password;

    #[Validate('required')]
    public $current_password;

    public $updatePassword;

    public function render()
    {
        return view('livewire.user-profile', [
            'user' => Auth::guard('admins')->user()
        ]);
    }

    public function editUserProfile()
    {

    }

    public function updatePassword()
    {
        $this->validate();
    }
}

Routes

    Route::get('/profile', [UserProfile::class, 'render']);
    Route::post('/profile', [UserProfile::class, 'editUserProfile']);
    Route::post('/profile/update-password', [UserProfile::class, 'updatePassword']);

Answer 1

ok Tladi you've missed a bit here that is important to understand with livewire.

The round trips, the data events (posting etc) are all handled by livewire. There is no need to define a route, the livewire component takes care of all that!

onto the modifications!

@csrf
@method('POST')
// remove both of theses

once those are gone, then update your button to this

<button wire:click="updatePassword"
    class="text-white bg-blue-700 cursor-pointer hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center">Update
    Password</button>

This basically what then happens behind the scenes is livewire will bundle up the state from your form and send it off to the component (controller) and fire the function "updatePassword" which if the form is empty should trigger the validator.