ipyvuetify catch the user input value of text Field when user changes it

603 views Asked by At

I am using vuetify to catch an input of a user as follows:

enter image description here

%pip install ipyvuetify
%pip install ipywidgets
import random 
import ipywidgets as widget
from ipywidgets import VBox
import ipyvuetify as v

v_nr = v.TextField(label='Enter a number here:', placeholder='Enter here data', value = '2342354')
v_nr.value='The value was changed sucssefully'
v_btn_load    = v.Btn(class_='mx-2 light-red darken-1', children=['the data'])
w_Output = widget.Output()
infostring    = ' this is the infostring there'
other_info    = v.Html(tag='p', children=[infostring])

Output = VBox([w_Output])
total_widgets = v.Col(children = [v_nr,v_btn_load,w_Output,other_info])

def on_click_v_btn_load(widget, event, data):
    with w_Output:
        w_Output.clear_output()
        n = random.random()
        display(str(n) + '  :' + v_nr.value)
    other_info.children.append(' APPEND ')
        
    
v_btn_load.on_event('click', on_click_v_btn_load)
container = v.Container(children=[total_widgets])
display(container)

What I would like to solve:

  1. The visualization is ok but when changing the value in the input it is not catched by the v_application.value within the event handler of the button. Nevertheless in the second line: v_nr.value='The value was changed successfully' the value was changed programatically. How do you have to code in order the input changes the value of the input text when the user changes it?
  2. other_info.children.append(' APPEND ') does not seem to work but does not report neither error. What is expecting is that the word GORILA is appended every time the button is clicked, and that is not the case.

Any ideas? Thx.

NOTE: included %pips for convinience.

1

There are 1 answers

1
Christoph Weiss-Schaber On BEST ANSWER

the property of v_nr to access the content is 'v_model', not 'value'.

by simply changing this it works:

import random 
import ipywidgets as widget
from ipywidgets import VBox
import ipyvuetify as v

v_nr = v.TextField(label='Enter a number here:', placeholder='Enter here data', v_model = '2342354')
v_nr.v_model='The value was changed sucssefully'
v_btn_load    = v.Btn(class_='mx-2 light-red darken-1', children=['the data'])
w_Output = widget.Output()
infostring    = ' this is the infostring there'
other_info    = v.Html(tag='p', children=[infostring])

Output = VBox([w_Output])
total_widgets = v.Col(children = [v_nr,v_btn_load,w_Output,other_info])

def on_click_v_btn_load(widget, event, data):
    with w_Output:
        w_Output.clear_output()
        n = random.random()
        display(str(n) + '  :' + v_nr.v_model)
    other_info.children.append(' APPEND ')
        
    
v_btn_load.on_event('click', on_click_v_btn_load)
container = v.Container(children=[total_widgets])
display(container)