Handling Scientific Notation Input with v_model_number

[proy30]

Hello again,

After seeing numerous suggestions to use v_model_number instead of v_model for handling numeric inputs, I decided to give it a try with the following code:

from trame.app import get_server
from trame.ui.vuetify2 import SinglePageLayout
from trame.widgets import vuetify2 as vuetify

server = get_server(client_type="vue2")
state, ctrl = server.state, server.controller

state.field1 = 1

@state.change("field1")
def change_detected(**kwargs):
    print(f"field1 changed to {state.field1}")
    print(f"type of field1 is: {type(state.field1)}")

with SinglePageLayout(server) as layout:
    with layout.content:
        with vuetify.VContainer(
            fluid=True,
            classes="d-flex justify-center align-center",
            style="height: 100%;",
        ):
            with vuetify.VCard(style="max-width: 400px;"):
                vuetify.VCardTitle("VCard")
                with vuetify.VCardText():
                    vuetify.VTextField(
                        v_model_number=("field1",),
                        label="Field 1",
                        outlined=True,
                    )

server.start()

Using v_model_number is great because it ensures the input is treated as a number instead of a string. However, I encounter issues when inputting large scientific values, such as 1e23.

The problem is that v_model_number updates the value on every input event. If 1e23 is entered, the value is prematurely formatted after typing 1e2, converting it to 100 before the user can finish entering the intended input.

Would it be possible to have a mechanism to delay this behavior and trigger the value conversion only on the change event instead of every input change? I have been utilizing custom functions on the change property to handle type/scientific number format conversion, but having built-in support for this use case would be wonderful. Maybe something like v_model_scientific_number?

[jourdain]

So trame does not implement that logic. This is part of vue.js, trame just expose what is available. See the documentation.

You can see what we did here to fix that behavior, but maybe the v-model.number.lazy="..." could fix your issue.