How do I handle input events in Vue 3?

How do I handle input events in Vue 3?

In Vue 3, you can handle input events using the v-on directive or the shorthand @. For example, you can use @input to listen for input events.

Can you show me an example of using @input?

Sure! Here's a simple example:

<template>
  <input v-model="text" @input="handleInput" />
</template>
<script>
export default {
  data() {
    return {
      text: ''
    };
  },
  methods: {
    handleInput(event) {
      console.log(event.target.value);
    }
  }
};
</script>

What other input events can I listen to?

You can listen to various input events like @change, @focus, @blur, and @keydown. Each serves a different purpose.

How do I prevent the default action of an event?

You can prevent the default action by calling event.preventDefault() in your event handler. For example:

handleInput(event) {
  event.preventDefault();
  // Your logic here
}