【发布时间】：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);
});
}
})
【问题讨论】：
标签： vue.js vuejs2 axios vue-component vuetify.js