Vue 2 - render components from an ajax response

问题

Is there a way to render components that come from an ajax response? For example, I registered a component "Test" and in the ajax response I have:

<p>dummy paragraph</p>
<test></test> <!-- vue component I want to render -->
<p>another dummy paragraph</p>

My final goal is to make a shortcode that lets the user insert a router link in the content area.

I'm using Vue 2, vue router

Edit: here is a demo https://jsfiddle.net/Paulius_Krutkis/4mb1ypqs/

回答1:

I am not sure, what is the exact issue you are facing here, If you are looking for how to render the HTML returned from ajax call, You can use v-html which can render the string variable having HTML.

However be aware:

Note that the contents are inserted as plain HTML - they will not be compiled as Vue templates.

So v-html will not compile and and render any vue component as you may expect, you may have to find some other solution for it.

---

Alternet way

However as you are saying, you need a way to render components that come from an ajax response, You can take help of Async-Components, where you define your component as a factory function that asynchronously resolves your component definition.

see the demo here: https://jsfiddle.net/4mb1ypqs/1/

来源：https://stackoverflow.com/questions/40695546/vue-2-render-components-from-an-ajax-response