Friday, February 23, 2024
 Popular · Latest · Hot · Upcoming
13
rated 0 times [  16] [ 3]  / answers: 1 / hits: 17289  / 8 Years ago, wed, april 20, 2016, 12:00:00

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

More From » vue.js

 Answers
28

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>

[#62468] Tuesday, April 19, 2016, 8 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
kalias

Total Points: 79
Total Questions: 116
Total Answers: 116

Location: Malaysia
Member since Wed, May 11, 2022
2 Years ago
;