142 votes

Vue.js obtient un élément dans un composant

J'ai un composant, comment puis-je sélectionner un de ses éléments ?

J'essaie d'obtenir une entrée qui se trouve dans le modèle de ce composant.

Il peut y avoir plusieurs composants, de sorte que le querySelector ne doit analyser que l'instance actuelle du composant.

Vue.component('somecomponent', {
    template: '#somecomponent',
    props: [...],

   ...

    created: function() {
        somevariablehere.querySelector('input').focus();
    }
});

2voto

akauppi Points 3125

Composition API

Références du modèle Cette section explique comment cela a été unifié :

  • dans le modèle, utilisez ref="myEl" ; :ref= avec un v-for
  • dans script, avoir un const myEl = ref(null) et l'exposer à partir de setup

La référence porte l'élément DOM à partir du montage.

0 votes

De sorte que l'exécution d'une requête comme document.querySelectorAll("nav > ul > li"); est hors de question ?

0 votes

Non, ça ne l'est pas. Mais là, vous commencez la requête à partir de document, la racine. Puisque vous créez un composant, la requête devrait probablement commencer à partir d'un nœud du composant.

0 votes

Ok alors quelque chose comme <header ref="headerEL"> où header est un parent de nav, alors const headerEl = ref<HTMLElement>() alors vous pouvez faire const links = headerEl.value.querySelectorAll('nav > ul > li')

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X