Vue compile when inserting in DOM

Question

Vue compile when inserting in DOM

Navigation

#1 by (0 votes)

0

I need to insert a compiled element in DOM , however it will be inserted in a random place, not in a pre-defined place like this documentation ...

var res = Vue.compile('<div><span>{{ msg }}</span></div>')
new Vue({
  data: {
    msg: 'hello'
  },
  render: res.render,
  staticRenderFns: res.staticRenderFns
})

All approaches with v-for , v-if/show will not serve me because they also require pre-defined elements.

I tried 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 do not find the result compiled in those objects, it seems to be that it is written to a promisse , which is triggered when element is pre-defined in the DOM.

Finally, how can you insert elements compiled into the DOM with vue 2 ?

vue.js vue.js-2

asked by anonymous 20.11.2017 / 13:33

1 answer

How to edit ListView items at runtime E-mail sending C # Error Invalid HELO name

score 0 · Accepted Answer

I was able to solve

First of all, I believe that dynamically added components are unable to communicate with the internal methods of the vue instance but with their own methods, finally, to add a component to the DOM I used% ...

let comp = Vue.component('comp', {
  template: '<div @click.stop="alert">Hello!</div>',
  methods : {
  	alert () {
    	alert('hello');
    }
  }
})

new Vue({
	el: '#app',
  methods : {
    replace () {
    	new comp().$mount('#test');
    }
  },
  components : {
  	comp
  }
})

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script><body><divid="app" @click.stop="replace">
  
    <div id="test">
    test
    </div>

  </div>

</body>

Reference Andrejs Abrickis Medium