web-dev-qa-db-fra.com

VueJs obtenir un élément dans un composant

J'ai un composant, comment puis-je sélectionner l'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 sélecteur de requête doit uniquement analyser l'instance actuelle du composant.

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

   ...

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

Merci d'avance

javascriptvue.js
81
some-name-i-cant-think-of

vous pouvez accéder aux enfants d'un composant vuejs avec this.$children. si vous voulez utiliser le sélecteur de requête sur l'instance de composant actuelle, alors this.$el.querySelector(...)

il suffit de faire une simple fonction console.log(this) pour afficher toutes les propriétés d'une occurrence du composant vue.

en outre, si vous connaissez l'élément auquel vous souhaitez accéder dans votre composant, vous pouvez y ajouter la directive v-el:uniquename et y accéder via this.$els.uniquename.

80
vbranden

vuejs 2

v-el:el:uniquename a été remplacé par ref="uniqueName". On accède ensuite à l'élément via this.$refs.uniqueName.

134
tariqdaouda

Dans Vue2, sachez que vous pouvez accéder à this. $ Refs.uniqueName uniquement après avoir monté le composant.

34
Dominik Dosoudil

Les réponses ne sont pas claires:

Utilisez this.$refs.someName, mais pour l'utiliser, vous devez ajouter _ref="someName"_ dans le parent.

Voir la démo ci-dessous.

_new Vue({
  el: '#app',
  mounted: function() {
    var childSpanClassAttr = this.$refs.someName.getAttribute('class');
    
    console.log('<span> was declared with "class" attr -->', childSpanClassAttr);
  }
})_
_<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>

<div id="app">
  Parent.
  <span ref="someName" class="abc jkl xyz">Child Span</span>
</div>_

_$refs_ et _v-for_

Notez que lorsqu'il est utilisé avec _v-for_, le _this.$refs.someName_ sera un tableau:

_new Vue({
  el: '#app',
  data: {
    ages: [11, 22, 33]
  },
  mounted: function() {
    console.log("<span> one's text....:", this.$refs.mySpan[0].innerText);
    console.log("<span> two's text....:", this.$refs.mySpan[1].innerText);
    console.log("<span> three's text..:", this.$refs.mySpan[2].innerText);
  }
})_
_span { display: inline-block; border: 1px solid red; }_
_<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>

<div id="app">
  Parent.
  <div v-for="age in ages">
    <span ref="mySpan">Age is {{ age }}</span>
  </div>
</div>_
32
acdcjunior