Filament•3w ago

Dynamically set ->options() in Radio Input from API

Hi, I am working on a public livewire full page component. In this component I am trying to set radio values based on a function which calls an api with data from the form to retrieve the options This function sets a public property called $transportOptions. Now I want to use these options inside a Radio input. I start with calling the setTransportOptions() on afterStateUpdated on the fields which need to recall the api. Then inside of the Radio input i have the following:

 Radio::make('transport_option')
    ->hintAction(
        Action::make('Retrieve Possible Transport Options')
            ->action(function ($livewire) {
                $this->setTransportOptions($livewire);
                dd($this->transportOptions);
            })
    )
    ->options(array_column($this->transportOptions, 'label', 'value'))

 Radio::make('transport_option')
    ->hintAction(
        Action::make('Retrieve Possible Transport Options')
            ->action(function ($livewire) {
                $this->setTransportOptions($livewire);
                dd($this->transportOptions);
            })
    )
    ->options(array_column($this->transportOptions, 'label', 'value'))

This is the setTransportOptions function

public static function setTransportOptions(&$livewire)
    {
        ...
        foreach ($vehicles as $vehicle) {
            ... API CALL ...

            $livewire->transportOptions[] = [
                'label' => $vehicle->name,
                'value' => $vehicle->id,
                'vehicle_id' => $vehicle->id,
                'price' => $price,
                'co2' => $co2,
                'distance' => $distance,
                'details' => [
                    ['label' => 'Distance', 'value' => number_format($distance, 1), 'unit' => 'km'],
                    ['label' => 'CO₂', 'value' => number_format($co2, 1), 'unit' => 'g'],
                    ['label' => 'Price', 'value' => number_format($price, 2), 'unit' => '€']
                ]
            ];
        }

public static function setTransportOptions(&$livewire)
    {
        ...
        foreach ($vehicles as $vehicle) {
            ... API CALL ...

            $livewire->transportOptions[] = [
                'label' => $vehicle->name,
                'value' => $vehicle->id,
                'vehicle_id' => $vehicle->id,
                'price' => $price,
                'co2' => $co2,
                'distance' => $distance,
                'details' => [
                    ['label' => 'Distance', 'value' => number_format($distance, 1), 'unit' => 'km'],
                    ['label' => 'CO₂', 'value' => number_format($co2, 1), 'unit' => 'g'],
                    ['label' => 'Price', 'value' => number_format($price, 2), 'unit' => '€']
                ]
            ];
        }

Solution:

Figured it out. I made my own plugin for radio inputs. It had the wire:ignore attribute on it for the custom alpine class. I changed it to wire:ignore.self and it worked.

Jump to solution

3 Replies

gladjanus43OP•3w ago

For testing purposes I removed the afterState call and am calling the api via the hint action. The end goal is to use my own RadioCard plugin instead of Radio input. The weird thing is that inside my radioCard plugin it does throw the options. It just does not render the fields. Does anybody have any clues where the issue lies? Or what other solutions can I try? Thanks in advance!

gladjanus43OP•3w ago

public ?array $transportOptions = [];

public ?array $transportOptions = [];

i have this as a public property. Now my understanding of livewire was that whenever public properties are updated, it also resends the html over the wire. What would be other options to set the values inside my radioCard plugin?

RadioCard::make('transport_option')
  ->hintActions([
      Action::make('Retrieve Possible Transport Options')
          ->action(function ($livewire) {
              $this->setTransportOptions($livewire);
          }),
      Action::make('get transport options')
          ->action(fn() => dd($this->transportOptions))
  ])
  ->options($this->transportOptions)

RadioCard::make('transport_option')
  ->hintActions([
      Action::make('Retrieve Possible Transport Options')
          ->action(function ($livewire) {
              $this->setTransportOptions($livewire);
          }),
      Action::make('get transport options')
          ->action(fn() => dd($this->transportOptions))
  ])
  ->options($this->transportOptions)

For testing purposes i also added a get and set function, I would like to set the options of the card based on this action. When I set the public property to the following, then it does work but these values of course can be dynamic:

 public ?array $transportOptions = [
    'success' => [
        'label' => 'Success',
        'icon' => 'heroicon-o-check-circle',
    ],
    'error' => [
        'label' => 'Error',
        'icon' => 'heroicon-o-x-circle',
    ]
];

 public ?array $transportOptions = [
    'success' => [
        'label' => 'Success',
        'icon' => 'heroicon-o-check-circle',
    ],
    'error' => [
        'label' => 'Error',
        'icon' => 'heroicon-o-x-circle',
    ]
];

I am really lost here so help would be appriciated!

Solution

gladjanus43•3w ago

Figured it out. I made my own plugin for radio inputs. It had the wire:ignore attribute on it for the custom alpine class. I changed it to wire:ignore.self and it worked.

Gaming

Programming

Dynamically set ->options() in Radio Input from API