在 Ajax 请求之后以动态附加的 HTML 呈现组件

Question

Use case:

I have the dependency of a JQuery Library which appends HTML dinamically after some Ajax requests. I would like to display Vue components inside the appended HTML. I can supply the content of the HTML, but I can't change the way it gets appended to the DOM using JQuery.

I have no choice but to render the component when the Ajax request finnishes and the HTML was appended to the DOM.

What would be the best approach to do that?

Answer 1

The "best" approach is highly subjective.

However, you can certainly attach a component to an element if you know the element id:

import component from 'Component.vue'
new Vue({
    el: '#targetId',
    render: h => h(component)
})

This assumes that you are using single file components. You can always create the component on the fly as well per the documentation :

new Vue({
  el: '#targetId',
  // options
})