[Vuejs]-Iterate component props in JSON format in vuejs

by

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

Leave a comment