[Vuejs]-Is it possible to target an input element using @keyup inside a custom component?

by

1👍

✅

On custom components, listeners like @myEvent will listen to custom events emitted with this.$emit. So here, @keyup is listening to custom events this.$emit('keyup') (It’s not the native keyup event from the DOM.)

Here, your TextField component never emit a keyup event, so your listener won’t ever be triggered. Even if you have a component inside that triggers an event with the same name, this event isn’t dispatch to the parents, only to its direct parent (i.e. the component using it).

What you have to do it emitting the event again while listening to it.

<TextField label="Some Text" @keyup="updateLen" v-model="text"  />

<template>
  <div>
    <v-text-field @keyup="keyUp"></v-text-field>
  </div>
</template>

<script>
  keyUp(event) {
     this.content = this.content.replace(/([^a-z0-9-]+)/gi, '');
     this.$emit('input', this.content); // Updates `v-model`
     this.$emit('keyup', event); // Triggers your `@keyup` listener
  },
</script>

If your TextField component is only a wrapper to v-text-field and you expect it to have the exact same props / listeners, you can disable to auto inheritance of attributes and set it yourself.

<template>
  <div>
    <v-text-field v-on="$listeners" v-bind="$attrs">
  </div>
</template>

<script>
export default {
   inheritAttrs: false, // The root element won't inherit all static attrs
}
</script>

Leave a comment