从 API 检索数据并将它们传递到 Vuetify 表中
Posted
技术标签:
【中文标题】从 API 检索数据并将它们传递到 Vuetify 表中【英文标题】：Retrieve data from an API and pass them in a Vuetify table 【发布时间】：2020-11-09 16:34:33 【问题描述】：在我申请初级开发人员职位的过程中，我被分配做这个项目。我从未在 Vue.js 上工作过，他们分配给我这个项目，要求从端点检索 JSON 数据并将它们投影到 vuetify 表中。我的主要问题是 vuetify 表我无法理解与普通 html 表的区别。此外，我不明白我是否必须使用 html 和 js 文件做一个小应用程序，或者也使用 node.js 并进行处理。但是我确实找到了解决方案，但我不知道要为 vuetify 表更改什么。
<!--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】：vuetify 数据表具有许多功能，例如数据分页、排序、自定义渲染和更高级的功能，要使用它，请尝试通过 CDN 将 vuetify 库添加到您的项目中，或者使用 npm/yarn 安装它。
以下示例显示了基本用法：
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 表中的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 node.js MySQL 从 MySql DB 获取结果并将它们发送回 API.ai - DialogFlow
将日期从 Angular 传递到 Web API 2 的正确方法