Vue.js V-component On Table

In the Vue.js Docs, they say you have to use v-component instead of the direct component-tag when using a component in a table. But this doesn't work: Do you have any workaround -

Solution 1:

Evan made breaking changes in 1.0 again. After many failed attempts this is the combination of html/javascript that works for me when trying to include custom component in a table (which in turn is another parent component):

HTML file:

    <script id="comments-template" type="text/x-template">    
        <table>
            <tbody>
                <tr is="my-comment" :data="comment" v-for="comment in comments">
                </tr>
            </tbody>
        </table>
    </script>

    <script id="comment-template" type="text/x-template">
        <tr>
            <td>{{comment}}</td>
        </tr>
    </script>

JavaScript snippet:

    Vue.component('my-comment', {
        template: '#comment-template',
        props: [
            'data',        
        ],
        data: function() {
            return {   
                comment: '',
            };
        },
        ready: function() {        
            this.comment = this.data.comment;
        }
        ...
    });

    Vue.component('my-comments', {
        template: '#comments-template'
        ...
    });

There are two components here: my-comments (which is a table) and my-comment (which is a row/rows in the table). comment from v-for loop is passed as a data property and remapped inside my-comment to the actual data of my-comment (this.comment = this.data.comment).

It looks rather ugly and not completely intuitive but at least it works.

Solution 2:

I was pulling my hair out trying to fix this one until I realized I did not have the latest Vue.js installed.

Gladly, this issue was found to be a bug and is fixed on version 12.6 of Vue.js

You can download the latest here or simply go to vuejs.org