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

J'essaye d'obtenir une entrée qui est dans le modèle de ce composant.

Il peut y avoir plusieurs composants, de sorte que le sélecteur de requêtes ne doit analyser que l'instance actuelle du composant.

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

   ...

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

Merci d'avance

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

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

de plus si vous connaissez l'élément auquel vous souhaitez accéder dans votre composant, vous pouvez y ajouter la v-el:uniquenamedirective et y accéder viathis.$els.uniquename

vuejs 2

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

Les réponses ne sont pas claires:

Utilisez this.$refs.someName, mais, pour l'utiliser, vous devez ajouter ref="someName"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é 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/[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>

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

Vue 2.x

Pour information officielle:

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

Un exemple simple:

Sur n'importe quel élément, vous devez ajouter un attribut refavec une valeur unique

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

Pour cibler cette utilisation elemet this.$refs.foo

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

API de composition

La section des références de modèles indique comment cela a été unifié:

• dans le modèle, utilisez ref="myEl"; :ref=avec unv-for
• dans le script, ayez un const myEl = ref(null)et exposez-le à partir desetup

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