Vue $el Object
Example
Using the $el object to change the background color of a <div> tag on root level.
methods: {
changeColor() {
this.$el.style.backgroundColor = 'lightgreen';
}
}
See more examples below.
Definition and Usage
The $el object represents the root DOM node of the Vue component.
The $el object does not exist until the Vue application is mounted.
If there is only one HTML root element in the <template>:
- the
$elobject will be that root element. - the DOM can be manipulated directly using the
$elobject (see the example above), but it is not recommended. - it is better to use the Vue
refattribute and other Vue functionality to change the DOM declaratively, because it leads to code that is more consistent and easier to maintain (see Example 1 below).
If there is more than one HTML root element in the <template>:
- the
$elobject will just be a placeholder DOM text node that Vue uses internally (not the actual DOM element). - the DOM cannot be manipulated using the
$elobject when there are multiple root elements (see Example 2 below).
Note: In Vue 3's Composition API, the $el property is not accessible in <script setup> (using the setup function).
More Examples
Example 1
Using the ref attribute to change the background color of a <div> tag declaratively as recommended, instead of using the $el object.
<template>
<div ref="rootDiv">
<h2>Example $el Object</h2>
<p>It is recommended, and more consistent, to use the ref attribute instead of the $el object to change the background color root DIV tag.</p>
<button v-on:click="changeColor">Click here</button>
</div>
</template>
<script>
export default {
methods: {
changeColor() {
this.$refs.rootDiv.style.backgroundColor = 'lightgreen';
}
}
}
</script>
Example 2
With more than one element in the root of the <template>, the $el object will just be a text node representation (not the actual DOM element) of the first element of the root elements, used internally by Vue.
We cannot manipulate the DOM with the $el object is such cases.
<template>
<div>
<h2>Example $el Object</h2>
<p>We are not able to use the $el object to change the background color of the root DIV tag when there are other tags on the root level. Open browser console to see the error generated.</p>
<button v-on:click="changeColor">Click here</button>
</div>
<p>With this extra p-tag there are two tags on the root level.</p>
</template>
<script>
export default {
methods: {
changeColor() {
this.$el.style.backgroundColor = 'lightgreen';
}
}
}
</script>
<style>
#app > div, #app > p {
border: solid black 1px;
padding: 10px;
}
</style>
Example 3
Using the $el object to change the background color of a <h2> child element.
<template>
<div>
<h2>Example $el Object</h2>
<p>Using the $el object to change the background color of the H2 child element.</p>
<button v-on:click="changeColor">Click here</button>
</div>
</template>
<script>
export default {
methods: {
changeColor() {
this.$el.children[0].style.backgroundColor = 'lightblue';
}
}
}
</script>
Related Pages
Vue Tutorial: Vue Template Refs
Vue Tutorial: Vue Methods
Vue Reference: Vue 'ref' Attribute
Vue Reference: Vue $refs Object
