I have input on form text, I want to see the input in the log using what event key?
<input class="form-control" type="text" //event>
in this text for example I type
"seat"
then the console log appears
s
se
sea
seat
-
you can also watch the model, (which your want to add anyway)Lawrence Cherone– Lawrence Cherone2022-01-02 18:01:49 +00:00Commented Jan 2, 2022 at 18:01
Add a comment
|
4 Answers
You can attach event handler and print out log as shown in the js fiddle below. Open the browser dev tool console tab and check.
new Vue({
el: "#app",
data() {
return {
inputValue: null,
}
},
methods: {
inputChange(e) {
console.log(e.target.value);
}
}
})
<div id="app">
<input type="text" :value="inputValue" @input="inputChange" />
</div>
Comments
The input element fires 2 useful events when edited:
- The
inputevent is fired every time the value of the element changes. - The
changeevent fires when the value is committed, for example pressing the enter key, selecting a value from a dropdown list, etc.
In your case for a text input element where you want every keypress, the input event is what you need:
<input class="form-control" type="text" @input="inputEvent">
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
Comments
Maybe vue watcher is that where you looking for.
<template>
<div id="app">
<p>
<input v-model="value" placeholder="hi">
</p>
<p>value: {{ value }} </p>
</div>
</template>
<script>
export default {
data() {
return {
value: 'hey',
};
},
watch: {
value(val) {
console.log(val)
}
},
methods: {
}
};
</script>
Comments
Most of the time "@input" is not necessary and can be better replaced by v-model and watch as pointed by @Maik (more in line with vue best practices). However, if you have a specific context and want to access the input value::
methods: {
handleInput(evt: any) {
console.log(evt.target.value)
}
}
@input="handleInput"
