Vue.js getting an element within a component
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();
}
});
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.
this.$el is undefined until mounted. If you want to initialize a variable do it in mount()
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(' was declared with "class" attr -->', childSpanClassAttr);
}
})
$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(" one's text....:", this.$refs.mySpan[0].innerText);
console.log(" two's text....:", this.$refs.mySpan[1].innerText);
console.log(" three's text..:", this.$refs.mySpan[2].innerText);
}
}) span { display: inline-block; border: 1px solid red; }
In Vue2 be aware that you can access this.$refs.uniqueName only after mounting the component.
Vue 2.x
For Official information:
https://v2.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"
Composition API
Template refs section tells how this has been unified:
within template, use ref="myEl"; :ref= with a v-for
within script, have a const myEl = ref(null) and expose it from setup
The reference carries the DOM element from mounting onwards.
document.querySelectorAll("nav > ul > li"); is out of the question?
<header ref="headerEL">, where header is a parent of nav, then const headerEl = ref<HTMLElement>(), then you can do const links = headerEl.value.querySelectorAll('nav > ul > li')
Follow WeChat
Success story sharing
Want to stay one step ahead of the latest teleworks?
Subscribe Now相似问题
- Getting the ID of the element that fired an event
- How do I check if an element is hidden in jQuery?
- Retrieve the position (X,Y) of an HTML element
- Using jQuery to test if an input has focus
- How to move an element into another element?
- Scroll to an element with jQuery
- Loop inside React JSX
- Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag
- How to pass props to {this.props.children}
refattribute works on any HTML element or Vue component. Good stuff.