Retrieve data from an API and pass them in a Vuetify table

问题

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.

  <!--Html file-->
  <!DOCTYPE html>
  <html lang="en" dir="ltr">

  <head>
  <meta charset="utf-8">
  <title>Employees Table Information</title>
   <!--Inserting bootstrap and axios Cdn -->
   <link rel="stylesheet" 
   href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384- 
   9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
   </head>

   <body>

   <!--Creating the div containing the table of employees-->
   <div id="app">
     <table class="table">
      <thead class="thead-dark">
       <tr>
        <th scope="col">#</th>
        <th scope="col">Employee Name</th>
        <th scope="col">Employee Salary</th>
        <th scope="col">Employee Age</th>
        <th scope="col">Profile Image</th>
       </tr>
    </thead>
    <tbody>
     <!--Looping through each object and projecting its fields -->
      <tr v-for="employee in employees">
       <th scope="row">{{employee.id}}</th>
        <td>{{employee.employee_name}}</td>
        <td>{{employee.employee_salary}}</td>
        <td>{{employee.employee_age}}</td>
        <td>{{employee.profile_image}}</td>

       </tr>

     </tbody>
    </table>



     </div>

      <!--Adding vue and app.js sources-->

     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script src="app.js" charset="utf-8"></script>
   </body>

    </html>
 ===================================================================================================
  //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 => {
      // handle success
      this.employees = response.data.data;
       console.log(response);
    })
      .catch(error => {
       // handle error
      console.log(error);
     });
   }
  })

回答1:

The vuetify data table comes with many features like data pagination, sorting, custom rendering and more advanced functionalities, to work with it try to add vuetify library to your project via CDN or by installing it using npm/yarn.

the following example shows a basic usage :

var app = new Vue({
  el: '#app',
   vuetify: new Vuetify(),
  data: {
    employees: [{
        "id": "1",
        "employee_name": "Tiger Nixon",
        "employee_salary": "320800",
        "employee_age": "61",
        "profile_image": ""
      },
      {
        "id": "2",
        "employee_name": "Garrett Winters",
        "employee_salary": "170750",
        "employee_age": "63",
        "profile_image": ""
      },
      {
        "id": "3",
        "employee_name": "Ashton Cox",
        "employee_salary": "86000",
        "employee_age": "66",
        "profile_image": ""
      },
      {
        "id": "4",
        "employee_name": "Cedric Kelly",
        "employee_salary": "433060",
        "employee_age": "22",
        "profile_image": ""
      },
      {
        "id": "5",
        "employee_name": "Airi Satou",
        "employee_salary": "162700",
        "employee_age": "33",
        "profile_image": ""
      },
      {
        "id": "6",
        "employee_name": "Brielle Williamson",
        "employee_salary": "372000",
        "employee_age": "61",
        "profile_image": ""
      }
    ],
    headers: [{
        text: 'ID',
        value: 'id'
      },

      {
        text: 'employee name',
        value: 'employee_name'
      },
      {
        text: 'employee salary',
        value: 'employee_salary'
      },
      {
        text: 'employee age',
        value: 'employee_age'
      },
    ]
  },


})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
  <v-app id="inspire">
    <v-data-table :headers="headers" :items="employees" class="elevation-1">

    </v-data-table>
  </v-app>
</div>

来源：https://stackoverflow.com/questions/62995150/retrieve-data-from-an-api-and-pass-them-in-a-vuetify-table

标签

Vue.js

vuejs2

axios

vue-component

vuetify.js