F
Filament•5d 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!
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?