Why is it so that the two way binding of data is rendered only after an event like focusout in a textBox in Blazor?

Question

I have a component, where I am having an text box and I want to have it rendered in a div where I can see two-way binding of data happening.

In vueJS, for example the value will be rendered instantly if we use v-model (here we are using @bind-value) to bind the data. In blazor, it is happening but only if I move out of the textfield (example - focusout event).

Is there a way possible in Blazor that the data or value should get rendered as soon as I type in the input(textfield).

Blazor code <input type="text" @bind-value="Name"/>

@Name

VueJS Code <input type="text" @v-model="Name"/>

{{Name}}

just giving an example what I tried and wanted to do. Also mentioned here how things would work in VueJs.

Answer 1

By default the event for binding of inputs for Blazor is "onchange" therefore changes will only visible when clicking outside the element.

To change it to your needs you have to manually specify the bind-event yourself to "oninput", for example:

<input @bind="InputValue" @bind:event="oninput" />

For more information take a look here