0๐
I made some adjustments, things like remove from main instance of vue data.devices, put only in component. But basically the tip from @Bert solve the issue. (Thank you again)
var app = new Vue({
el: '#app',
data: {
currentView: 'dash'
}
});
Vue.component('list-devices',{
template:`
<table>
<thead>
<tr>
<th>Device</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr v-for="device in devices" :key="device.id">
<td> {{ device.description }} </td>
<td> {{ device.on_line }} </td>
<td> {{ device.switch_on }} </td>
</tr>
</tbody>
</table>
`,
data: function(){
return {
devices: '',
};
},
created: function() {
this.$http.get(API+'/devices')
.then(result => {
if (result.status == 200) {
this.devices = result.data.devices;
}
console.log(devices);
})
}
});
Source:stackexchange.com