CODEWITHSUNDEEP
javascriptvue.jsvuejs2
David Alsh
David Alsh

Reputation: 7601

VueJS how to target the current component and createElement within it?

I'm trying to gain relative access to the current component and create a div within it once the components is ready to go.

This is the code for my component, it illustrates that I am trying to get this element and create a div within it on the mounted lifecycle hook.

{
    template: "<div></div>",
    mounted: function(){
        let testElm = this.$el.createElement("DIV")
        testElm.innerHTML = "testing"
    }
}

This responds with the following error 

TypeError: this.$el.createElement is not a function

Upvotes: 0

Views: 1269

Answers (1)

Bert
Bert

Reputation: 82439

Several things.

createElement is a method of document.

This is a very non Vue-like way to go about things. If the component has to update the DOM, whatever you are adding in the mounted method will be removed.

You can get the code to work but I do not recommend it. Not sure what you are trying to accomplish.

console.clear()

Vue.component("test",{
  template: "<div></div>",
  mounted(){
    let test = document.createElement("div")
    test.innerHTML = "this is probably not a good idea"
    this.$el.appendChild(test)
  }
})

new Vue({
  el: "#app",
})
<script src="https://unpkg.com/[email protected]"></script>
<div id="app">
  <test></test>
</div>

Upvotes: 2

Related Questions