I have a component, how can I select one of its elements?
I'm trying to get an input that is within this component's template.
There could be multiple components so the querySelector
must only parse the current instance of the component.
Vue.component('somecomponent', {
template: '#somecomponent',
props: [...],
...
created: function() {
somevariablehere.querySelector('input').focus();
}
});
This question is related to
javascript
vue.js
you can access the children of a vuejs component with this.$children
. if you want to use the query selector on the current component instance then this.$el.querySelector(...)
just doing a simple console.log(this)
will show you all the properties of a vue component instance.
additionally if you know the element you want to access in your component, you can add the v-el:uniquename
directive to it and access it via this.$els.uniquename
Template refs section tells how this has been unified:
ref="myEl"
; :ref=
with a v-for
const myEl = ref(null)
and expose it from setup
The reference carries the DOM element from mounting onwards.
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({_x000D_
el: '#app',_x000D_
mounted: function() {_x000D_
var childSpanClassAttr = this.$refs.someName.getAttribute('class');_x000D_
_x000D_
console.log('<span> was declared with "class" attr -->', childSpanClassAttr);_x000D_
}_x000D_
})
_x000D_
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>_x000D_
_x000D_
<div id="app">_x000D_
Parent._x000D_
<span ref="someName" class="abc jkl xyz">Child Span</span>_x000D_
</div>
_x000D_
$refs
and v-for
Notice that when used in conjunction with v-for
, the this.$refs.someName
will be an array:
new Vue({_x000D_
el: '#app',_x000D_
data: {_x000D_
ages: [11, 22, 33]_x000D_
},_x000D_
mounted: function() {_x000D_
console.log("<span> one's text....:", this.$refs.mySpan[0].innerText);_x000D_
console.log("<span> two's text....:", this.$refs.mySpan[1].innerText);_x000D_
console.log("<span> three's text..:", this.$refs.mySpan[2].innerText);_x000D_
}_x000D_
})
_x000D_
span { display: inline-block; border: 1px solid red; }
_x000D_
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>_x000D_
_x000D_
<div id="app">_x000D_
Parent._x000D_
<div v-for="age in ages">_x000D_
<span ref="mySpan">Age is {{ age }}</span>_x000D_
</div>_x000D_
</div>
_x000D_
For Official information:
https://vuejs.org/v2/guide/migration.html#v-el-and-v-ref-replaced
A simple Example:
On any Element you have to add an attribute ref
with a unique value
<input ref="foo" type="text" >
To target that elemet use this.$refs.foo
this.$refs.foo.focus(); // it will focus the input having ref="foo"
v-el:el:uniquename
has been replaced by ref="uniqueName"
. The element is then accessed through this.$refs.uniqueName
.
In Vue2 be aware that you can access this.$refs.uniqueName only after mounting the component.
Source: Stackoverflow.com