Vue replacing "el" component instead of rendering inside it?

user_4970739 0
Viewed 546

I don't know if this is a standard feature but Vue is replacing the element specified by "el" when the instance is created, instead of rendering inside of it.

if I use an id to reference the "el" then it works fine. ie,

new Vue({el: "div#app", render: h => h("span", {}, "Hello World")})

which will render as:

<body><div id="app"><span>Hello World</span></div></body>

but if I use a JS Element object as "el" then it replaces that element altogether.

const divElement = document.querySelector("div#app");
new Vue({el: divElement, render: h => h("span", {}, "Hello World")});

will render as:

<body><span>Hello World</span></body>

is it supposed to do that, or am I doing something wrong?

vue.js web html javascript
1 Answers

Probably there is some confusion on your side. I just prepared a sample where:

const el = document.getElementById("app");
new Vue({ el: el, render: (h) => h(App) });

Successfully renders to:

<body><div id="app">// content here</div></body>

https://codesandbox.io/s/clever-swartz-yie0l?file=/src/main.js

But you still need to keep in mind that is not an element of DOM you had before vue mounted there but a virtual representation of it.

From vue documentation:

The provided element merely serves as a mounting point. Unlike in Vue 1.x, the mounted element will be replaced with Vue-generated DOM in all cases. It is therefore not recommended to mount the root instance to or .

https://v2.vuejs.org/v2/api/#el

user_142939710
Related