Getting and setting values of Menu Radio elements through JS

[poutena]

I'm using a menu radio group for a dropdown menu as shown on the Layouts > Header documentation. However, there's no documentation for this particular element and I just can't figure out how to interact with it through JS.

I want to:

• Get / set the checked value
• Catch "on change" events
  … but I couldn't figure out how to do it, or whether it's possible. I'm fairly inexperienced with JS, though.

If this isn't possible, my request is to add such features. If it is, then I'd like to see that somewhere in the documentation, because code that works with standard <input type="radio" /> elements isn't working with these.

Thanks in advance!

[jeffchown]

@poutena Have you tried adding a property via wire:model to your <flux:menu.radio.group>?

I believe it will work the same as a regular <flux:radio.group> e.g.:

<flux:radio.group wire:model="payment" label="Select your payment method">
    <flux:radio value="cc" label="Credit Card" checked />
    <flux:radio value="paypal" label="Paypal" />
    <flux:radio value="ach" label="Bank transfer" />
</flux:radio.group>

Then you can get/set the value in your Livewire component's PHP file and can add an e.g. updatedPayment method to respond to a user changing the value (don't forget to add .live (or .change) to the wire:model if you want it to perform a Livewire update call immediately after a user changes the value.

Great thing about this is you will not need to use any native JS - one of the great strengths of Livewire!

[poutena]

In this specific case, it's for something exclusively client-side – setting the theme (light, dark, or match system), a setting I want to have saved on the browser rather than a user account or something like that. If I were to implement it through Livewire I'm imagining I'd end up making it call a JS function anyway (which is already implemented), so anything that involves server calls sounds like an overcomplicated workaround rather than a solution.

It is a workaround though, so unless there's a better way I might have to do it. Thank you for the suggestion!

[jeffchown]

@poutena I see. In that case, you should be able to use Alpine's x-model in place of wire:model. See https://alpinejs.dev/directives/model and https://alpinejs.dev/magics/watch

[poutena]

Worked like a charm! Thank you!

[jeffchown]

You're welcome, @poutena !