VueJS obtener un elemento dentro de un componente

Tengo un componente, ¿cómo puedo seleccionar uno de sus elementos?

Estoy tratando de obtener una entrada que esté dentro de la plantilla de este componente.

Puede haber varios componentes, por lo que el queryselector solo debe analizar la instancia actual del componente.

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

   ...

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

Gracias de antemano

 51
vue.js
Author: Thomas Ayoub, 2016-05-08
Source

4 answers

Puede acceder a los hijos de un componente vuejs con this.$children. si desea utilizar el selector de consulta en la instancia de componente actual, this.$el.querySelector(...)

Simplemente haciendo un simple console.log(this) le mostrará todas las propiedades de una instancia de componente vue.

Además, si conoce el elemento al que desea acceder en su componente, puede agregarle la directiva v-el:uniquename y acceder a ella a través de this.$els.uniquename

 55
Author: vbranden,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-05-11 20:03:29

En vuejs 2 v-el:el:uniquename ha sido sustituido por ref="uniqueName". Se accede al elemento a través de this.ref árbitros.UniqueName .

 102
Author: tariqdaouda,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-05 08:32:56

En Vue2tenga en cuenta que puede acceder a esto.ref árbitros.UniqueName solo después de montar el componente.

 30
Author: Dominik Dosoudil,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-07-18 14:24:31

Las respuestas no lo dejan claro: {[12]]}

Uso this.$refs.someName, pero, para usarlo, debe agregar ref="someName" en el padre.

Ver demostración a continuación.

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 y v-for

Observe que cuando se usa junto con v-for, el this.$refs.someName será una matriz: 

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>
 12
Author: acdcjunior,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-03-05 00:51:24