Komponenty zagnieżdżone VueJS

Question

Utworzono komponent vue, który ma początkowe wywołanie ajax, które pobiera tablicę obiektów, przez które przechodzę. Czy istnieje sposób definiowania/rzutowania tych obiektów jako innego komponentu vue? Oto, co mam do tej pory:

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', 
}); 

Answer 1

Dla kompletności zamieściłbym tutaj odpowiedź na moje własne pytanie.

Wszystko zasługa Joseph Silber i Jeff

kod z 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', 
}); 

kod z 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>