What is the the way to catch the ipyvuetify radio button group value catcher?

Question

I have a widget including a radio button group such as:

parts =vue.RadioGroup(children=[vue.Radio(label='XX'),
                                             vue.Radio(label='YY'),
                                             vue.Radio(label='ZZ')])

I dont know how can I access what the user clicks, hence I try to check all the properties of the radio button group as such:

out = widgets.Output()

def on_click_radio(widget, event, data):
    with out:
        out.clear_output()
        print("you have clicked", data)
        print("v_model is:", widget.v_model)
        print("value is", widget.value)
        print("active-class is", widget.active_class)
        widgetsKeys = widget.keys
        
#         for key in widgetsKeys:
#             print(f'{key}: ',eval(f'widget.{key}'))
#         
        

parts.on_event("change",on_click_radio)

display(parts,out)

I see that data changes from from 0 to 2 ( [0,1,2] ) But I would like to access the values 'XX', 'YY' or 'ZZ?

What is the property to access in the radio button group? I thought it would be v_model as in a text input, but it is not.

thanks

PS1: It should be one of theses properties: https://vuetifyjs.com/en/api/v-radio-group/#props But I could not figure out which one by printing the all out

PS2: Accessing this values through '_trait_values' Dictionary seems to be a pain in the neck. right?

Answer 1

There are two possible solutions. Which one you prefer depends on your specific case.

Solution 1: Pass a value with the Radio

parts = vue.RadioGroup(
    children=[
        vue.Radio(label='XX', value='XX'),
        vue.Radio(label='YY', value='YY'),
        vue.Radio(label='ZZ', value='ZZ')
    ]
)

This will be enough to fill the data:

you have clicked XX

Solution 2: attach the on_click_radio method to the individual Radio instead of the RadioGroup:

xx = vue.Radio(label='XX')
yy = vue.Radio(label='YY')
zz = vue.Radio(label='ZZ')

parts = vue.RadioGroup(children=[xx,yy,zz])

def on_click_radio(widget, event, data):
    print("label is", widget.label)

xx.on_event("change",on_click_radio)
yy.on_event("change",on_click_radio)
zz.on_event("change",on_click_radio)

This will give you access to the Radio widget which was clicked via the widget parameter of the on_click_radio method:

label is XX

Answer 2

You need to initialise the v_model in the radio group. Then you can find the label from the Radio Group children. See below.

import ipyvuetify as vue
parts =vue.RadioGroup(
            v_model=None,
            children=[
                 vue.Radio(label='XX'),
                 vue.Radio(label='YY'),
                 vue.Radio(label='ZZ'),
                    ])

def on_click_radio(widget, event, data):
    print("Active radio label is", widget.children[widget.v_model].label)
        
parts.on_event("change",on_click_radio)

parts