I created a vue component, which has an initial ajax call that fetches an array of objects that i will be looping through. Is there a way to define/cast these objects as another vue component? This is what i got so far:

var myComponent = Vue.extend({
    template: '#my-component',

    created: function() {
        this.$http
            .get('/get_objects')
            .then(function(data_array) {
                for (var i = 0; i < data_array.data.length; i++) {
                    var item = data_array.data[i];

                    // <<-- How do i tell vue to cast another component type here??

                }
            }
        );
    }
});

Vueponent('my-component', myComponent);

new Vue({
    el: 'body',
});

I created a vue component, which has an initial ajax call that fetches an array of objects that i will be looping through. Is there a way to define/cast these objects as another vue component? This is what i got so far:

var myComponent = Vue.extend({
    template: '#my-component',

    created: function() {
        this.$http
            .get('/get_objects')
            .then(function(data_array) {
                for (var i = 0; i < data_array.data.length; i++) {
                    var item = data_array.data[i];

                    // <<-- How do i tell vue to cast another component type here??

                }
            }
        );
    }
});

Vue.component('my-component', myComponent);

new Vue({
    el: 'body',
});

• javascript
• vue.js

• 2 You do it in the template. <child-component v-for="item in list"></child-component> – Joseph Silber Commented Apr 20, 2016 at 14:03
• The vue way to do this, is to have previously defined your component, so you just populate it's data and display it with v-if/v-show if you have only one component to show or with a v-for if you have many components to show – Yerko Palma Commented Apr 20, 2016 at 14:22
• Thanks for your replies. How can I access the item variable in the child component, when going with Josephs solution? It does not seem to be available in the child template. – chrisg86 Commented Apr 20, 2016 at 14:42
• Some more details: The parent component is a table and the child component a tr element. This works to print the basic layout, but not to pass the variable to the child component: <tr is="child-component" v-for="item in list"></tr> – chrisg86 Commented Apr 20, 2016 at 15:19
• 1 Pass in the item variable like so <tr is="child-component" v-for="item in list" :item="item"></tr> – Jeff Commented Apr 20, 2016 at 16:07

1 Answer 1

For completeness I will post the answer to my own question here.

All the credit goes to Joseph Silber and Jeff

Code from main.js

var myComponent = Vue.extend({
    template: '#my-component',

    data: function() {
        return {
            objects: []
        }
    },

    created: function() {
        this.$http
            .get('/get_objects')
            .then(function(objects) {
                this.objects = objects.data;
            }
        );
    }
});

var myComponentChild = Vue.extend({
    template: '#my-component-child',

    props: ['item'],

    data: function() {
        return {
            item: {}
        }
    }
});

Vue.component('my-component', myComponent);
Vue.component('my-component-child', myComponentChild);

new Vue({
    el: 'body',
});

Code from index.html

<my-component></my-component>

<template id="my-component">
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>URL</th>
            </tr>
        </thead>
        <tbody>
            <tr is="my-component-child" v-for="item in objects" :item="item"></tr>
        </tbody>
    </table>
</template>

<template id="my-component-child">
    <tr>
        <td></td>
        <td>{{ item.name }}</td>
        <td>{{ item.url }}</td>
    </tr>
</template>