pythonipywidgetsipyvuetify

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


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?


Solution

  • 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