I need to instantiate zero or more Vue components within HTML generated by a markdown rendering plugin. The component count and props for each are defined in the markdown. (I control the markdown plugin.)
instead of normal template syntax:
<my-component :key="uid_var"></my-component>
markdown plugin would generate HTML:
<div id="uid">replaced by component</div>
which we pass to vue in a template:
<div v-html="md.render(src, {map:myCompMap})"></div>
This article suggests the following
https://css-tricks.com/creating-vue-js-component-instances-programmatically/
var ComponentClass = Vue.extend(MyComponent);
var instance = new ComponentClass({
propsData: { input: 'xyz' },
});
instance.$mount('#uid');
But this is user-written markdown, re-rendered on every keystroke, so we should re-use component instances. Questions...
Do I call
instance.$mount('#uid')
after eachmd.render()
pass?Do I call
instance.$destroy()
if a latermd.render()
pass drops a component?Do I need a key attribute in the markdown, e.g.
<div id="uid" key="uid">
? I suspect the above achieves what a key provides in vue templates.