Modifiers
In VueJS we have "v-on" or "@" directives to get an event and display something:
<input v-model="message">
<button type="submit" @click="showMessage">click me</button>
<script>
...
data: () => ({
message: '',
}),
methods: {
showMessage() {
return console.log(this.message)
}
}
</script>
In this case the directive throws the method "showMessage", then it displays a console with the message.
But if I need to set an event to execute the "showMessage" method by press enter on input?
Well there is another modifier for this behavior:
<input v-model="message" @keyup.enter="showMessage">
<button type="submit" @click="showMessage">click me</button>
<script>
...
data: () => ({
message: '',
}),
methods: {
showMessage() {
return console.log(this.message)
}
}
</script>
By simple adding a directive "keyup" and adding the modifier ".enter" then it would catch the event and execute the method "showMessage", well this would be ok in many scenarios a most easy way to handle this situation is with a regular form tag:
<form @submit.prevent="showMessage">
<input>
<button type="submit">click me</button>
</form>
<script>
...
data: () => ({
message: '',
}),
methods: {
showMessage() {
return console.log(this.message)
}
}
</script>
In this case we are still using a modifier but this time it is used in the form tag by adding "@submit" directive and the modifier ".prevent", this would make a prevent default on submit to avoid refreshing the page and then execute the "showMessage" method.
In this post I show a little example of the VueJS modifiers but there are a lot more, just search in the docs, thanks for reading.
Oldest comments (0)