Dynamically set ->options() in Radio Input from API | Filament | Page 1

prime notch Dec 5, 2024, 2:07 PM

#

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'))

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' => '€']
                ]
            ];
        }

cobalt auroraBOT Dec 5, 2024, 2:07 PM

#

To help others find answers, you can mark your question as solved via Right click solution message -> Apps -> ✅ Mark Solution

prime notch Dec 5, 2024, 2:07 PM

#

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!

prime notch Dec 5, 2024, 3:08 PM

#

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)

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',
    ]
];

I am really lost here so help would be appriciated!

prime notch Dec 5, 2024, 3:25 PM

#

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

prime notch Dec 6, 2024, 9:57 AM

#

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.

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