Search code examples
vue.jsjupyter-notebookipywidgetsipyvuetify

Why am I getting '!!disabled!!' from a TextField in ipyvuetify?


I insert some Text into v_document, then I click v_btn_document but I get !!disabled!!. Why?

import ipyvuetify as vue

def on_click_get_numbers(widget, event, data):
    print(v_document.v_model) # get !!disabled!! here!!! WHY?

v_document = vue.TextField(
    style_      = 'width: 290px',
    label       = 'File number', 
    type        = "text",
    outlined    = True,
    clearable   = True,
    disabled    = False,
    placeholder = '')

v_btn_document = vue.Btn(
    class_ = 'mx-2 green darken-1', 
    style_ = 'width: 100px; height: 55px',
    children = ['Submit'])

v_empty = vue.Img(
    width = 30,
)

interface1 = vue.Html(tag='div', class_='d-flex flex-row', children=[
    vue.Html(tag='div', class_='d-flex flex-row', children=[v_document, v_empty, v_btn_document]),
])

v_btn_document.on_event('click',   on_click_get_numbers)

display(interface1)

Solution

  • Found the solution. According to documentation

    The v_model attribute has to be explicitly set when creating the widget.

    Thus, this worked

    v_document = vue.TextField(
        style_      = 'width: 290px',
        label       = 'File number',
        v_model     = '', # ADD THIS LINE
        type        = "text",
        outlined    = True,
        clearable   = True,
        disabled    = False,
        placeholder = ''
    )