Vue.js getting an element within a component

Question

vuejs 2

v-el:el:uniquename has been replaced by ref="uniqueName". The element is then accessed through this.$refs.uniqueName.

There's a few options depending on what you're trying to access:

• You can access the child components of a Vue.js component with this.$children

• You can label specific DOM elements inside your template using ref="uniqueName" and refer to these later via this.$refs.uniqueName
  (but remember that you won't be able to refer to these until the component/app has finished mounting and performed an initial render)

• If you're unable to label your elements, you can query the DOM for child elements using a CSS selector via this.$el.querySelector('.myClass > .childElement')
  (as above, the component/app needs to have finished mounting)

You can also explore by doing a simple console.log(this) inside your component and it will show you all the properties of your Vue component instance.

The answers are not making it clear:

Use this.$refs.someName, but, in order to use it, you must add ref="someName" in the parent.

See demo below.

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

Notice that when used in conjunction with v-for, the this.$refs.someName will be an array:

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>

In Vue2 be aware that you can access this.$refs.uniqueName only after mounting the component.