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

Question

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

Answer 1

Vuejs 2

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

Answer 2

Il y a plusieurs options en fonction de ce à quoi vous essayez d'accéder :

• Vous pouvez accéder aux composants enfants d'un composant Vue.js avec this.$children

• Vous pouvez étiqueter des éléments DOM spécifiques dans votre modèle à l'aide des éléments suivants ref="uniqueName" et s'y référer plus tard via this.$refs.uniqueName
  (mais n'oubliez pas que vous ne pourrez pas vous y référer tant que le composant/application n'aura pas été mis à jour). montage terminé et effectué un rendu initial)

• Si vous n'êtes pas en mesure d'étiqueter vos éléments, vous pouvez interroger le DOM pour trouver les éléments enfants à l'aide d'un sélecteur CSS via this.$el.querySelector('.myClass > .childElement')
  (comme ci-dessus, le composant/app doit avoir montage terminé )

Vous pouvez également explorer en faisant une simple console.log(this) dans votre composant et il vous montrera toutes les propriétés de votre instance de composant Vue.

Answer 3

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/vue@2.5.13/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é en conjonction 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/vue@2.5.13/dist/vue.min.js"></script>

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

Answer 4

Sur Vue2 sachez que vous pouvez accéder this.$refs.uniqueName seulement après avoir monté le composant.

Answer 5

Vue 2.x

Pour des informations officielles :

https://vuejs.org/v2/guide/migration.html#v-el-and-v-ref-replaced

Un exemple simple :

Sur tout élément, vous devez ajouter un attribut ref avec un valeur unique

<input ref="foo" type="text" >

Pour cibler cet élément, utilisez this.$refs.foo

this.$refs.foo.focus(); // it will focus the input having ref="foo"