Mokkapps Logo

Vue Tip: Query Inner Elements in Third-Party Components

Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)
April 21, 2022
1 Minuten Lesezeit
|
- Ansichten

In some cases, we have to deal with third-party Vue components where we cannot put a ref on inner HTML elements to access them in our Vue code.

In these cases we can access $el on a template ref on the third-party component:

<template>
  <ThirdPartyComponent ref="comp"/>
</template>

<script setup lang="ts">
  const compRef: Ref<typeof ThirdPartyComponent | null> = ref(null);
  const input: HTMLInputElement | null = compRef.value?.$el.querySelector('input');
</script>

In general and for consistency, you should use template refs for direct access to elements instead of relying on $el.




If you liked this tip, follow me on Twitter to get notified about new tips, blog posts, and more content from me.

Alternatively (or additionally), you can also subscribe to my newsletter.

Sie haben einen Fehler in diesem Artikel gefunden? Sie möchten gerne etwas klarstellen, aktualisieren oder hinzufügen?

Alle meine Artikel können auf Github editiert werden. Jeder Fix ist willkommen, egal wie klein er sein mag!

Ändern auf Github