Vue.js - Component with two rowspan
<p>I'm beginner with Vue.js and I would like to use component. I have a (dynamic) table with machines (SN = serial number) and their money for each source so I want to use rowspan. Each row will be instance of component because has own checkbox and I would like to work with it later. Problem is that I don't know how to use loop with creating component which is a bit complicated inside table. Here is example:</p>

<pre><code>&lt;div id="container"&gt;
    &lt;table border="1"&gt;
        &lt;template v-for="row in storage.rows"&gt;
            &lt;tr&gt;
                &lt;td rowspan="2"&gt;&lt;input type="checkbox"&gt;&lt;/td&gt;
                &lt;td rowspan="2"&gt;{{row.sn}}&lt;/td&gt;
                &lt;td&gt;{{row.source}}&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;{{row.pair.source}}&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/template&gt;
    &lt;/table&gt;
&lt;/div&gt;

&lt;script&gt;
    new Vue({
        el: '#container',

        data: {
            storage: {
                rows: [
                    {sn: 111, source: 'EK', pair: {source: 'VLT', in: 100}},
                    {sn: 222, source: 'EK', pair: {source: 'VLT', in: 200}}
                ]
            }
        },


    });
&lt;/script&gt;
</code></pre>

<p>This works fine but I don't know how to transform template to component. With Vue.js I'm using Laravel and its template engine Blade so I have workaround like this:</p>

<pre><code>&lt;div id="container"&gt;
    &lt;table border="1"&gt;
        @foreach($differences as $difference)
            &lt;tr is="ek" diff="{{ json_encode($difference) }}"&gt;&lt;/tr&gt;
            &lt;tr is="vlt" diff="{{ json_encode($difference-&gt;pair) }}"&gt;&lt;/tr&gt;
        @endforeach
    &lt;/table&gt;
&lt;/div&gt;

&lt;template id="ek-template"&gt;
    &lt;tr&gt;
        &lt;td rowspan="2"&gt;&lt;input type="checkbox"&gt;&lt;/td&gt;
        &lt;td rowspan="2"&gt;@{{ difference.sn }}&lt;/td&gt;
        &lt;td&gt;@{{ difference.source }}&lt;/td&gt;
    &lt;/tr&gt;
&lt;/template&gt;

&lt;template id="source-template"&gt;
    &lt;tr&gt;
        &lt;td&gt;@{{ difference.source }}&lt;/td&gt;
    &lt;/tr&gt;
&lt;/template&gt;

&lt;script&gt;
    new Vue({
        el: '#container',

        data: {
            storage: {
                differences: {!! json_encode($differences) !!}
            }
        },

        components: {
            ek: {
                template: '#ek-template',
                props: ['diff'],

                computed: {
                    difference: function () {
                        return JSON.parse(this.diff);
                    },
                },
            },

            vlt: {
                template: '#source-template',
                props: ['diff'],
                computed: {
                    difference: function () {
                        return JSON.parse(this.diff);
                    },
                },
            }
        },
    });
&lt;/script&gt;
</code></pre>

<p>And I want to use Vue.js loop instead Laravel's <code>foreach</code> because I have already data in Vue.js object. Is there any solution how to do it? </p>