Menu
Without using v-model, how to retrieve text field's value when typing? If possible without using any methods.
<input type="text" class="form-field"
v-on:keyup="data.sample = this.target.value">
I used
this.target.value
e.target.value
671
To get an input value in Vue, we can use the v-model directive to set up a two-way binding between the value and a variable. Every time the user changes the text in the input field, the text variable will be updated automatically. We can then use this variable to perform an action or display information.
The v-on:keyup directive is a Vue. js directive used to add an event listener to an button in the keyboard. First, we will create a div element with id as app and let's apply the v-on:keyup directive to the input element. Further, we can execute a function when we press the associated key.
Definition and Usage The onkeyup attribute fires when the user releases a key (on the keyboard). Tip: The order of events related to the onkeyup event: onkeydown. onkeypress.
(keyup) is an Angular event binding to respond to any DOM event. It is a synchronous event that is triggered as the user is interacting with the text-based input controls. When a user presses and releases a key, the (keyup) event occurs.
The solution is:
<input type="text" v-on:keyup="this.$data.name = $event.target.value">
From documentation:
When listening to native DOM events, the method receives the native event as the only argument. If using inline statement, the statement has access to the special $event property: v-on:click="handle('ok', $event)"
jsfiddle
79
The best way to handle any key with Vuejs is like this :
<input type="text" @keyup.stop.native="handleInput($event)">
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
