Why does the value of a Select element gets synchronised between TabItems, but not its display?

[rg98]

Hi,

I provided a small example which shows my problem. The example should work in every ipynotebook. I used ipyvuetify 1.9.4 in jupyterhub 5.0.0 on ubuntu 24.04 with python 3.12.3.

When I switch from one tab to the other, the text is up to date, but the Select object does not show. the right Item. I'm not able to get it in sync. Could somebody point me into the right direction?

Best regards Ralph

import ipyvuetify as v

items = {'Item 1': 1,
         'Item 2': 2}

item = v.Select(label='Items',
                items=list(items.keys()),
                value=list(items.keys())[0])

text1 = v.Textarea(value=f'Some content {items[item.value]}')
text2 = v.Textarea(value=f'Some other content {items[item.value]}')

def on_click(widget, event, data):
    global text1, text2
    print('onclick:', data)
    text1.value = f'Some content {items[data]}'
    text2.value = f'Some other content {items[data]}'

item.on_event('change', on_click)

v.Tabs(_metadata={'mount_id': 'content-main'}, children=[
        v.Tab(children=['Tab 1']),
        v.Tab(children=['Tab 2']),
        v.TabItem(children=[
            v.Container(class_='grey lighten-5',
                        children=[
                            v.Row(align_content='start',
                                  justify='center',
                                  children=[
                                      v.Spacer(),
                                      v.Col(xs=4,
                                            sm=4,
                                            md=4,
                                            lg=4,
                                            xl=4,
                                            children=[
                                                item
                                            ]),
                                      v.Spacer()
                            ]),
                            v.Row(align_content='start',
                                  justify='center',
                                  children=[
                                      text1
                                  ])
                        ])
        ]),
        v.TabItem(children=[
            v.Container(class_='grey lighten-5',
                        children=[
                            v.Row(align_content='start',
                                  justify='center',
                                  children=[
                                      v.Spacer(),
                                      v.Col(xs=4,
                                            sm=4,
                                            md=4,
                                            lg=4,
                                            xl=4,
                                            children=[
                                                item
                                            ]),
                                      v.Spacer()
                            ]),
                            v.Row(align_content='start',
                                  justify='center',
                                  children=[
                                      text2
                                  ])
                        ])
        ])
])

[rg98]

Found my problem: I need to use v_model instead of value in the Select and Textarea.

[maartenbreddels]

Great to hear you solved this!