VueJs obtention d'un élément à l'intérieur d'un composant

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

je vais essayer d'obtenir un niveau d'entrée qui est au sein de cette composante du modèle.

Il pourrait y avoir plusieurs composants de sorte que le queryselector doit analyser uniquement l'instance actuelle de la composante.

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

   ...

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

Merci d'avance

InformationsquelleAutor Dale Snowdon | 2016-05-08
  1. 75

    vous pouvez accéder les enfants d'un vuejs composant avec this.$children. si vous souhaitez utiliser la requête sélecteur sur le composant en cours d'instance puis this.$el.querySelector(...)

    juste faire une simple console.log(this) va vous montrer toutes les propriétés d'une vue instance de composant.

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

    • Astuce: this.$el est pas défini jusqu'à la montée. Si vous souhaitez initialiser une variable le faire dans mount()
    InformationsquelleAutor vbranden
  2. 129

    vuejs 2

    v-el:el:uniquename a été remplacé par ref="uniqueName". L'élément est alors accessible par le biais de this.$refs.uniqueName.

    • Cela m'a aidé à réaliser que la ref attribut fonctionne sur n'importe quel élément HTML ou de la Vue de composant. De bonnes choses.
    • Il ressemble à ceci.$réf.uniqueName est un tableau, alors vous avez besoin pour cela.$réf.uniqueName[0] pour obtenir l'élément référencé.
    • seulement après le montage de composants , ce qui pourrait être fait dans le parent de la montée de la méthode : medium.com/@brockreece/...
    InformationsquelleAutor tariqdaouda
  3. 34

    Dans Vue2 sachez que vous pouvez accéder à cela.$réf.uniqueName seulement après le montage de la composante.

    • Le tout avant de monté en Vue du cycle de vie n'est pas présenté dans votre navigateur. Depuis, il n'a pas encore montées, il n'y a pas de DOM la disposition de l'inspection.
    InformationsquelleAutor Dominik Dosoudil
  4. 31

    Les réponses ne sont pas claires:

    Utilisation this.$refs.someName, mais, pour l'utiliser, vous devez ajouter ref="someName" dans le parent.

    Voir démonstration ci-dessous.

    JS:

    new Vue({
  el: '#app',
  mounted: function() {
    var childSpanClassAttr = this.$refs.someName.getAttribute('class');
    
    console.log('<span> was declared with "class" attr -->', childSpanClassAttr);
  }
})

    HTML:

    <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

    Avis que lorsqu'il est utilisé en conjonction avec v-for, le this.$refs.someName sera un tableau:

    JS:

    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);
  }
})

    CSS:

    span { display: inline-block; border: 1px solid red; }

    HTML:

    <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>

    • C'est ce qui explique mieux, je vous remercie.
    • Oui, c'est la meilleure explication. Merci beaucoup.
    InformationsquelleAutor acdcjunior