search

caldwell / renderjson

Render JSON into collapsible HTML
http://caldwell.github.io/renderjson
415 stars 91 forks source link

Doesn't work on vuejs #25

Closed mkantautas closed 5 years ago

mkantautas commented 6 years ago

Pulled it via npm. // importing import renderjson from 'renderjson/renderjson' // template <div v-html="performance_report" v-if="performance_report" > </div> // executing on mount


mounted(){
             this.performance_report = renderjson({ hello: [1,2,3,4], there: { a:1, b:2, c:["hello", null] } });
        },
        // outputs ``{}`` without any errors
caldwell commented 6 years ago

Sorry, I don't know Vue at all (though it's somewhere on my list of things to learn), so I don't think I can really help too much here. renderjson() returns a DOM tree and not raw HTML, so maybe v-html isn't right? That's a total guess!

adjenks commented 5 years ago

You are correct @caldwell , v-html "Expects" string: https://vuejs.org/v2/api/#v-html So he cannot use that template directive.

@neorganic you need to create your own component and perhaps use the render function: https://vuejs.org/v2/guide/render-function.html

It should work fine with vue as far as I understand.

catcuts commented 5 years ago

works with using this.$el.appendChild(renderjson(as demo in this project)) in mounted hook