How do I use the "goTo..." functions?

[kedodrill]

Hi there,

Thank you for maintaining and adding onto this package. I'm wondering how to use the "goTo" funcs, like goToNextMonth. I have livewire:my-calendar /> in another Livewire component, so it's nested. I'm trying to use those functions for buttons in that component.

<!-- ... -->
<span>
  <span>
    {{ $startsAt->englishMonth }}
  </span>
  <x-button wire:click="goToPreviousMonth">
    {{ __('Previous Month') }}
  </x-button>
  <x-button wire:click="goToCurrentMonth">
    {{ __('Current Month') }}
  </x-button>
  <x-button wire:click="goToNextMonth">
    {{ __('Next Month') }}
  </x-button>
</span>

<livewire:my-calendar />

I have tried putting @livewireCalendarScripts in the component. My error is:
Unable to call component method. Public method [goToNextMonth] not found on component. Any ideas?

[lrljoe]

So you can't do that I'm afraid! That's a limitation of Livewire itself.

What you need to do, is take:

<span>
  <span>
    {{ $startsAt->englishMonth }}
  </span>
  <x-button wire:click="goToPreviousMonth">
    {{ __('Previous Month') }}
  </x-button>
  <x-button wire:click="goToCurrentMonth">
    {{ __('Current Month') }}
  </x-button>
  <x-button wire:click="goToNextMonth">
    {{ __('Next Month') }}
  </x-button>
</span>

And put it into a Blade by itself, let's say you put it in

resources/views/before-calendar-view.blade.php

Then where you have

<livewire:my-calendar />

Instead you want:

<livewire:my-calendar before-calendar-view="before-calendar-view" />

This way, your blade is contained within the context of the Livewire Component, and your wire:click methods will work.

[kedodrill]

Thank you for the quick reply! I swear I had tried this as well, but I used the view function like so

<livewire:my-calendar before-calendar-view="{{ view('...') }}" />

Guess that confused it. Anyways, thanks again! It works fine now.