In the Vue.js Docs, they say you have to use v-ponent instead of the direct ponent-tag when using a ponent in a table. But this doesn't work: Do you have any workaround - even with CSS formatting - or fix?

@extends('app')

@section('content')
    <div class="table-responsive" id="vueTable">
        <table class="table-striped">
            <thead>
                <td class="table-cell"><strong>Aktion</strong></td>
            </thead>
            <tr v-ponent="members" class="success" v-repeat="members" inline-template>
                <td>@{{ $data | json }}</td>
            </tr>
        </table>
    </div>
@endsection

@section('footer')
    <script src="/js/vue.js"></script>
    <script>
        var v = new Vue({
            el: '#vueTable',
            data: {
                members: [{
                    prename: 'Deniz',
                    lastname: 'Adanc'
                }]
            },
            ponents: {
                members: {
                    template: ''
                }
            }
        });
    </script>
@endsection

In the Vue.js Docs, they say you have to use v-ponent instead of the direct ponent-tag when using a ponent in a table. But this doesn't work: Do you have any workaround - even with CSS formatting - or fix?

@extends('app')

@section('content')
    <div class="table-responsive" id="vueTable">
        <table class="table-striped">
            <thead>
                <td class="table-cell"><strong>Aktion</strong></td>
            </thead>
            <tr v-ponent="members" class="success" v-repeat="members" inline-template>
                <td>@{{ $data | json }}</td>
            </tr>
        </table>
    </div>
@endsection

@section('footer')
    <script src="/js/vue.js"></script>
    <script>
        var v = new Vue({
            el: '#vueTable',
            data: {
                members: [{
                    prename: 'Deniz',
                    lastname: 'Adanc'
                }]
            },
            ponents: {
                members: {
                    template: ''
                }
            }
        });
    </script>
@endsection

• javascript
• css
• html-table
• vue.js
• ponents

• If you are using an inline template, don't you need to remove the template attribute from the members ponent definition? Also, can you reproduce the problem in a jsfiddle? – David K. Hess Commented Jul 16, 2015 at 16:13

2 Answers 2

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

HTML file:

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

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

JavaScript snippet:

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

    Vue.ponent('my-ments', {
        template: '#ments-template'
        ...
    });

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

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

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