© 2026 Hedgehog Software, LLC

TwitterGitHubDiscord
More
CommunitiesDocsAboutTermsPrivacy
Search
Star
Setup for Free
FilamentF
Filament•13mo ago
charlie

From Livewire to Apine

Hi there!

This field doesn't need any request to work. What would be the appropriate way/syntax to translate live() / afterStateUpdated() methods to Alpine.js?

ColorPicker::make('background')
  ->label('Background Color')
  ->colors($this->getBackgroundColors())
  ->live()
  ->extraAttributes(['id' => 'background'])
  ->afterStateUpdated(function ($livewire) {
      $colors = json_encode($this->getBackgroundColors());
      $livewire->js(
          <<<JS
          const colors = JSON.parse('$colors');
          const color = document.querySelector('#background input[type="radio"]:checked').value;
          const shades = colors[color];
          previewTheme('gray', shades);
          window.background = shades;
          updateTheme();
      JS
      );
  }),
ColorPicker::make('background')
  ->label('Background Color')
  ->colors($this->getBackgroundColors())
  ->live()
  ->extraAttributes(['id' => 'background'])
  ->afterStateUpdated(function ($livewire) {
      $colors = json_encode($this->getBackgroundColors());
      $livewire->js(
          <<<JS
          const colors = JSON.parse('$colors');
          const color = document.querySelector('#background input[type="radio"]:checked').value;
          const shades = colors[color];
          previewTheme('gray', shades);
          window.background = shades;
          updateTheme();
      JS
      );
  }),


Preferably extracting the js code elsewhere.

Should I extend the field class or can I go with extraAttributes?

Thanks!
Filament banner
FilamentJoin
A powerful open source UI framework for Laravel • Build and ship admin panels & apps fast with Livewire
20,307Members
Resources

Similar Threads

Was this page helpful?
Recent Announcements

Similar Threads

pass data from Livewire to Wizard
FilamentFFilament / ❓┊help
15mo ago
Dispatching from app.js to Livewire
FilamentFFilament / ❓┊help
3y ago
Calling livewire component from xdata
FilamentFFilament / ❓┊help
17mo ago
Opening modal from Livewire Component
FilamentFFilament / ❓┊help
2y ago