JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<main>
    <test>
        <div slot="json">
            ["foo", "<b class=\"whee\">asd</b>asd", "b>anana"]
        </div>
    </test>
</main>

JavaScript

Vue.component('test', {
	//template: '<ul><li v-for="i in content" v-text="i"></li></ul>',
    template: '<pre v-text="content"></pre>',
    
    data: () => ({
    	content: null,
    }),
    
    methods: {
    	vnodeContent(node) {
        	console.log(node);
            let str = '';
            if (node.tag) {
            	str = `<${node.tag}>`;
            }
            
        	if (node.children) {
                str += node.children.map(this.vnodeContent).join('');
            } else {
            	str += node.text;
            }
            
            if (node.tag) {
            	str += `</${node.tag}>`;
            }
            
            return str;
        }
    },
    
    created() {
    	this.content = this.vnodeContent(this.$slots.json[0]);
    }
});

new Vue({
	el: 'main',
})