Vue 2 - 从 ajax 响应渲染组件 [英] Vue 2 - render components from an ajax response

问题描述

有没有办法渲染来自 ajax 响应的组件?例如，我注册了一个组件Test"，在 ajax 响应中我有:

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.

我使用的是 Vue 2，vue 路由器

I'm using Vue 2, vue router

这是一个演示 https://jsfiddle.net/Paulius_Krutkis/4mb1ypqs/

推荐答案

我不确定，您在这里面临的确切问题是什么，如果您正在寻找如何呈现从 ajax 调用返回的 HTML，您可以使用v-html 可以渲染具有 HTML 的字符串变量.

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.

但是请注意:

请注意，内容是作为纯 HTML 插入的 - 它们不会被编译为 Vue 模板.

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

所以 v-html 不会像你期望的那样编译和渲染任何 vue 组件，你可能需要为它找到一些其他的解决方案.

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.

但是，正如您所说，您需要一种方法来呈现来自 ajax 响应的组件，您可以借助 Async-Components，您可以在其中将组件定义为异步解析组件定义的工厂函数.

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.

在此处查看演示:https://jsfiddle.net/4mb1ypqs/1/

这篇关于Vue 2 - 从 ajax 响应渲染组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！