current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

I do have my component called Grid. Inside this component I load JSON data from server and i render them. They are mostly string and integers. Sometimes the JSON contains HTML like <strong>myvalue</stong> so I render the data with three brackets {{{ and }}}.

The thing is when the HTML is not pure HTML but component like <my-component my-param="1"></my-component>. How to tell to Vue.js to render this coponent? All I get is the HTML purely printed into grid.

Thanks

share|improve this question
    
Are you trying to achieve something like this: github.com/gurghet/vue-smart-table ? – gurghet Aug 25 '16 at 12:15
up vote 0 down vote accepted

You need to compile again that piece of code you've loaded from remote.

ps: I will use jQuery to manipulate the DOM.

Inside this component I load JSON data from server and i render them.

I'll assume you have a function named "loadAndRenderFromServer()", please adapt the code below to fits you.

Eg: If your grid has the markup <div id='grid'>

// vuecomponent.js
export default {
    [...]

    methods: {
        loadAndRenderFromServer() {
            // first, load remote content and insert into #grid

            // now, compile
            this.$compile($("#grid").get(0));
        }
    },

    [...]
}

You may need to use "decompile" if your component starts to duplicate the loaded content. Check into VueJS docs for compile and decompile methods.

share|improve this answer
1  
"I will use jQuery to manipulate the DOM" seems like missing the point of Vue. – ceejayoz Aug 25 '16 at 13:52
    
Pretty close man. I do have v-for on my JSON data. It's array with datasets. Each dataset represent table row. So I just do this.data = response.data and that's it. If I do call compile afterwards, will it work? – grafa Aug 25 '16 at 14:35
    
@ceejayoz, sorry but you're wrong. You can do simple manipulations to DOM with vue too, but there is nothing wrong in use jQuery or other libraries together within vue. – Ricardo Vigatti Aug 25 '16 at 16:20
    
@grafa, compile will render the html code again through your component. You can call compile once for all rows as i mentioned, or you can run it for each row. BUT, running for each row will be massive and will have overload of processing. I recomend to call it once, if possible. Don't forget to check the docs, i'm not an expert yet. xD – Ricardo Vigatti Aug 25 '16 at 16:20
    
@RicardoVigatti Just because you can doesn't mean you should, in many cases. I see people doing stuff like $(this.$els.whatever).text('foobar'); which wastes Vue's reactivity and templating system. – ceejayoz Aug 25 '16 at 16:24
up vote 0 down vote

Using v-html (which is equivalent to {{{}}}) will not render what's inside it if it's a component.

Instead try to use <slot> in your parent template.

Otherwise, if you want dynamic components you need to use <component> and if you want content inside those dynamic component you need to use <slot>s.

I would suggest you to use something like

<component :is="myComponent" />

and inside the models of those components put some <slot>s to insert arbitrary content.

share|improve this answer
    
Thank you. So in my v-for where I do render table cell data with {{{ and }}} I should use <slot> instead? Wil that render the array item? – grafa Aug 25 '16 at 13:07
    
Please check the documentation for more details: vuejs.org/guide/components.html#Content-Distribution-with-Sl‌​ots – gurghet Aug 25 '16 at 13:09

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.