You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 lines
2.0 KiB
50 lines
2.0 KiB
""" |
|
V-Model Vue Ref Dialog Test |
|
Uses v-model for reactive two-way data binding instead of DOM manipulation. |
|
""" |
|
|
|
import badgui as bg |
|
|
|
with bg.page("/", "VModelDialog", "V-Model Dialog Test"): |
|
with bg.column() as main_col: |
|
main_col.classes("q-pa-lg q-gutter-md") |
|
bg.label("V-Model Vue Ref Dialog Test").classes("text-h3 q-mb-lg") |
|
|
|
# Simple dialog with simplified card |
|
with bg.dialog() as my_dialog: |
|
with bg.card(title="Hello from Dialog!"): |
|
# Use v-model for reactive binding instead of Vue ref |
|
greeting_label = bg.label("Loading...") |
|
greeting_label.bind_text("greetingMessage") # Bind to reactive variable |
|
|
|
# Input with v-model binding |
|
name_input = bg.input("Your name") |
|
name_input.bind_value("userName") # Bind to reactive variable |
|
name_input.classes("q-mb-md") |
|
|
|
# Actions can go directly in the card |
|
with bg.row(): |
|
bg.button("Say Hello").on_click("sayHello").classes("q-btn-primary q-mr-sm") |
|
bg.button("Close").on_click("closeDialog").classes("q-btn-secondary") |
|
|
|
my_dialog.vue_ref("myDialog") |
|
|
|
# Main content - use reactive binding for status |
|
status_label = bg.label("Loading...") |
|
status_label.bind_text("statusMessage") # Bind to reactive variable |
|
status_label.classes("text-h6 q-mb-md") |
|
|
|
bg.button("Open Dialog").on_click("openDialog").classes("q-btn-primary") |
|
|
|
# JavaScript functions - V-Model version with reactive variables |
|
bg.script("vmodel.js") |
|
|
|
if __name__ == "__main__": |
|
print("🧪 V-Model Vue Ref Dialog Test") |
|
print("Testing v-model reactive data binding instead of DOM manipulation") |
|
|
|
# Build to examine output |
|
#bg.app.build("./vmodel-vue-ref-output", "vmodel-vue-ref") |
|
|
|
# Run dev server |
|
bg.dev(port=3019) |