title: Retrieve data from an API and pass them in a Vuetify table
body: <p>I was assigned to do this project as part of my application for a Junior Developer position. I have never worked on Vue.js and they assigned me with this project asking to retrieve JSON data from an endpoint and projecting them in a vuetify table. My main issue is with the vuetify table i can not understand the difference with the normal html table. Moreover i can not understand whether i have to do a small app using html and js files or to use node.js also and work on it. However i did find the solution i can not figure out what to change for the vuetify table.</p>
  <pre><code>  &lt;!--Html file--&gt;
    &lt;!DOCTYPE html&gt;
    &lt;html lang=&quot;en&quot; dir=&quot;ltr&quot;&gt;
  
    &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;title&gt;Employees Table Information&lt;/title&gt;
     &lt;!--Inserting bootstrap and axios Cdn --&gt;
     &lt;link rel=&quot;stylesheet&quot; 
     href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css&quot; integrity=&quot;sha384- 
     9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk&quot; crossorigin=&quot;anonymous&quot;&gt;
     &lt;script src=&quot;https://unpkg.com/axios/dist/axios.min.js&quot;&gt;&lt;/script&gt;
     &lt;/head&gt;
  
     &lt;body&gt;
  
     &lt;!--Creating the div containing the table of employees--&gt;
     &lt;div id=&quot;app&quot;&gt;
       &lt;table class=&quot;table&quot;&gt;
        &lt;thead class=&quot;thead-dark&quot;&gt;
         &lt;tr&gt;
          &lt;th scope=&quot;col&quot;&gt;#&lt;/th&gt;
          &lt;th scope=&quot;col&quot;&gt;Employee Name&lt;/th&gt;
          &lt;th scope=&quot;col&quot;&gt;Employee Salary&lt;/th&gt;
          &lt;th scope=&quot;col&quot;&gt;Employee Age&lt;/th&gt;
          &lt;th scope=&quot;col&quot;&gt;Profile Image&lt;/th&gt;
         &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
       &lt;!--Looping through each object and projecting its fields --&gt;
        &lt;tr v-for=&quot;employee in employees&quot;&gt;
         &lt;th scope=&quot;row&quot;&gt;{{employee.id}}&lt;/th&gt;
          &lt;td&gt;{{employee.employee_name}}&lt;/td&gt;
          &lt;td&gt;{{employee.employee_salary}}&lt;/td&gt;
          &lt;td&gt;{{employee.employee_age}}&lt;/td&gt;
          &lt;td&gt;{{employee.profile_image}}&lt;/td&gt;
  
         &lt;/tr&gt;
  
       &lt;/tbody&gt;
      &lt;/table&gt;
  
  
  
       &lt;/div&gt;
  
        &lt;!--Adding vue and app.js sources--&gt;
  
       &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;&gt;&lt;/script&gt;
  
      &lt;script src=&quot;app.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;
     &lt;/body&gt;
  
      &lt;/html&gt;
   ===================================================================================================
    //App.js file
    //creating the vue requiring the array of employee objects
    var app = new Vue({
      el: '#app',
      data: {
      employees: []
     },
    //GET request using axios to retrieve data from api and then store them
   //in the employees array
      mounted: function() {
      axios.get('http://dummy.restapiexample.com/api/v1/employees')
       .then(response =&gt; {
        // handle success
        this.employees = response.data.data;
         console.log(response);
      })
        .catch(error =&gt; {
         // handle error
        console.log(error);
       });
     }
    })
  </code></pre>