Is there a way to dynamically insert a compiled element into the DOM, without having a pre-defined location as instructed in the documentation?
var res = Vue.compile('<div><span>{{ msg }}</span></div>')
new Vue({
data: {
msg: 'hello'
},
render: res.render,
staticRenderFns: res.staticRenderFns
})
The usual approaches using v-for or v-if/show won't work either since they require predefined elements.
I attempted something like this...
document.getElementById('elPai').insertAdjacentHTML('beforeend', Vue.compile('<div><span>{{ msg }}</span></div>'));
It returns an object containing 'render' and 'StaticRenderFns', but I couldn't find the compiled result in these objects. It seems like it is stored in a 'Promise' that only gets triggered when the element is already defined in the 'DOM'.
So, how can we insert compiled elements into DOM using 'Vue 2'?