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.

Podría haber varios componentes, por lo que el selector de consulta solo debe analizar la instancia actual del componente.

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

   ...

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

Gracias de antemano

135
Snewedon 8 may. 2016 a las 23:07

5 respuestas

La mejor respuesta

Puede acceder a los elementos secundarios de un componente vuejs con this.$children. si desea utilizar el selector de consultas en la instancia del componente actual, entonces 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 él a través de this.$els.uniquename

97
vbranden 11 may. 2016 a las 20:03

Vue 2.x

Para información oficial:

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

Un ejemplo simple:

En cualquier elemento, debe agregar un atributo ref="foo"

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

Para apuntar al elemento utilizado, this.$refs.foo

this.$refs.foo.focus(); // it will focus the input having ref="foo"
0
Turna 11 mar. 2020 a las 19:22

Las respuestas no lo dejan claro:

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

Tenga en cuenta 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/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>
41
acdcjunior 5 mar. 2018 a las 00:51

Vuejs 2

v-el:el:uniquename ha sido reemplazado por ref="uniqueName". Luego se accede al elemento a través de this.$refs.uniqueName.

155
RudyOnRails 1 mar. 2019 a las 06:25

En Vue2 tenga en cuenta que puede acceder a this. $ Refs.uniqueName solo después de montar el componente.

37
thomaux 18 jul. 2017 a las 14:24