As vuejs to convert a string to a component?

Hi all. Website on the framework vuejs as text editor I use vue-quill-editor.
Enter text (description) tags [album_X]
5b5232613387a429182161.png

Then take the data via ajax and deduce:
<p v-html="post.description"></p>

There is a component ablum.vue which takes the value album_X and displays another html.

How to associate a description that comes with the component and display a different component?
June 3rd 19 at 19:25
3 answers
June 3rd 19 at 19:27
Solution
The actual piece of code of the project from the article) https://habr.com/post/414137/
the <script>
 import {parse} from 'himalaya'
 import Product from '~/components/Product/Product.vue';
 const hasProduct = parsedHtml => {
 let has = false;
 if (parsedHtml.children) {
 parsedHtml.children.forEach(ch => {
 if(has) return;
 if (ch.tagName == 'product') {
 has = true;
 } else {
 has = hasProduct(ch);
}
});
}
 return has;
};
 const toElement = (h, products) => parsedHtml => {
 if (parsedHtml.type == 'Text') {
 return [h('span', {
 domProps: {
 innerHTML: parsedHtml.content
},
})];
}
 if (parsedHtml.tagName == 'product') {
 let product = products.find(product => product.slug == parsedHtml.attributes.slug);
 if (!product) return ";
 return [h('div', {
 'class': ['catalog', 'catalog_view_row'],
 }, [
 h('div', {
 'class': ['catalog__cell'],
 }, [
h(
'product',
 {props: {product}}
)
])
])];
}
 let has = hasProduct(parsedHtml);
 return h(
 has ? 'div' : parsedHtml.tagName,
{
 'class': parsedHtml.attributes.className,
 'attrs': parsedHtml.attributes
},
parsedHtml.children
 ? parsedHtml.children.map(toElement(h, products))
 : []
)
};
 export default {
 components: {
Product
},
 props: [
'html',
'products',
],
 render(h) {
 let tree = parse(`<div>${this.html}</div>`);
 return tree.map(toElement(h, this.products))[0];
}
};
</script>


And regularly:
let match = article.content.match(/\$product\[([^\]]+)\]/g);
 if(match != null && match.length) {
 let promises = match.map(async (m) => {
 let slug = m.match(/\[(.+)\]/)[1];
 try {
 let product = await ctx.app.$api.product(slug);
 if(product) products.push(product);
 } catch (e) {
}
});
 await Promise.all(promises);
 }
June 3rd 19 at 19:29
On habré there are article

Vue provides us with ample opportunities of rendering a component using the render method. First look for all references of pointers to components in the received html and get the api data necessary for rendering this component. Next divide the entire html tree. This helped us to library himalaya. And then collect back the html replacing the signs on the ready-made components.
Thank you. But how to get the resulting html through render()? - missouri.Kozey97 commented on June 3rd 19 at 19:32
June 3rd 19 at 19:31
Example of using code generation. The output is a string containing a closure which returns an object with a render function and its helpers.
import { compile } from 'vue-template-compiler';
import * as transpile from 'vue-template-es2015-compiler';

function toFunction(code) {
 return `(function(){${code}})`;
}

export default () => {
 const vueTemplate = '<div>{{album_1}}</div>'; //here is the html for the vue template, without wrapping of the template
 const { render staticRenderFns } = compile(vueTemplate, { preserveWhitespace: false });
 return transpile(`(function(){
return {staticRenderFns:[${staticRenderFns.map(toFunction)}],render:${toFunction(render)}};
})()`);
}

Then I think it is clear.

Find more questions by tags JavaScriptVue.js