Oct 1, 2023

Level 3

Wire:change not working

Hi,

I don't know, but in my code, wire:change doesn't work.

I have this radio button:

                                <div class="col-lg-6">
                                    <!--begin::Option-->
                                    <input type="radio" class="btn-check" name="account_type"
                                           wire:model="selectedOption" value="email" wire:key="email"
                                           checked="checked" id="kt_create_account_form_account_type_email"
                                           wire:change="selectOption('email')"/>
                                    <label
                                        class="btn btn-outline btn-outline-dashed btn-active-light-primary p-7 d-flex align-items-center mb-10"
                                        for="kt_create_account_form_account_type_email">
                                        <i class="ki-duotone ki-badge fs-3x me-5">
                                            <span class="path1"></span>
                                            <span class="path2"></span>
                                            <span class="path3"></span>
                                            <span class="path4"></span>
                                            <span class="path5"></span>
                                        </i>
                                        <!--begin::Info-->
                                        <span class="d-block fw-semibold text-start">
																			<span
                                                                                class="text-dark fw-bold d-block fs-4 mb-2">{{ __('Fetch from email') }}</span>
																			<span
                                                                                class="text-muted fw-semibold fs-6">{{ __('Automatically fetch attachments from emails') }}</span>
																		</span>
                                        <!--end::Info-->
                                    </label>
                                    <!--end::Option-->
                                </div>
                                <!--end::Col-->

and in another div this :

@if ($selectedOption === 'email')
                                <div class="mb-3">
                                    <label for="emailField" class="form-label">Email</label>
                                    <input type="text" id="emailField" name="emailField"
                                           placeholder="Enter your email" wire:model="emailField"
                                           class="form-control"/>
                                </div>

@endif

and this is my controller:

class Index extends Component { public $selectedOption = null; public function render() { return view('livewire.integrationhub.index'); }

public function selectOption($option)
{
    $this->selectedOption = $option;
}

}

Maybe someone can explain to me the working flow of wire:change? And also with a hint for this problem?

LaryAI

2 years ago

Level 58

The wire:change directive in Livewire is used to trigger a method in the component when the value of an input element changes. In the provided code, the wire:change directive is used on the radio button input element to call the selectOption method with the value 'email' as an argument.

To troubleshoot the issue where wire:change is not working, you can follow these steps:

Make sure you have included the Livewire JavaScript library in your project. You can do this by adding the following line to your layout file, usually located in the <head> section:

@livewireScripts

Check if you have properly installed Livewire by running the following command in your project directory:

php artisan livewire:install

Verify that you have imported the Livewire component in your view file. In this case, it should be:

@livewire('integrationhub.index')

Ensure that you have the necessary Livewire directives in your layout file. You should have the following line just before the closing </body> tag:

@livewireScripts

Check if there are any JavaScript errors in the browser console. If there are any errors related to Livewire, it could be causing the wire:change directive to fail.

If the above steps do not resolve the issue, you can try the following:

Update your Livewire version to the latest version by running the following command:

composer require livewire/livewire

Clear the application cache by running the following command:

php artisan cache:clear

Restart your development server.

If the issue still persists, you can try reaching out to the Laracasts forum or Livewire GitHub repository for further assistance.

Note: The provided code does not include the complete component code, so there might be other factors contributing to the issue.

Snapey

2 years ago

Level 122

remove this, there is no need

checked="checked"

Where are the alternate radios? You cannot use a single radio?

netconnect

2 years ago

Level 3

@Snapey here is my entire code:

https://pastebin.com/kEV1PAA4

Snapey

2 years ago

Level 122

@marian-andreiasi and I might be able to read it if it had 1/3 of the lines by removing needless comments

1 like

netconnect

2 years ago

Level 3

here also i'm facing same problem:

@section('title')
    {{ __('Integration Hub') }}
@endsection

@section('breadcrumbs')
    {{ Breadcrumbs::render('integrationhub.index') }}
@endsection

<!--begin::Content container-->
    <div id="kt_app_content_container" class="app-container container-xxl">
        @if (!$userHasAccountSettings)
            <livewire:integrationhub.index></livewire:integrationhub.index>
        @else
            <button wire:click="redirectToIndex" class="btn btn-primary">Add New</button>

            <livewire:integrationhub.indexlist></livewire:integrationhub.indexlist>
        @endif
    </div>
<!--end::Content container-->

Please or to participate in this conversation.