从API检索数据并将其传递到Vuetify表中 [英] Retrieve data from an API and pass them in a Vuetify table
问题描述
我被分配从事这个项目，这是我申请初级开发人员职位的一部分.我从未使用过Vue.js，因此他们为我分配了这个项目，要求从端点检索JSON数据并将其投影到vuetify表中.我的主要问题是vuetify表，我无法理解与普通html表的区别.此外，我不明白我是否必须使用html和js文件来做一个小应用程序，还是也要使用node.js来进行工作.但是我确实找到了解决方案，但我不知道要对vuetify表进行哪些更改.
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);
});
}
})
推荐答案
vuetify数据表具有许多功能，例如数据分页，排序，自定义呈现和更多高级功能，要与之一起使用，请尝试将vuetify库添加到项目中通过CDN或使用npm/yarn安装它.
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>这篇关于从API检索数据并将其传递到Vuetify表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
