Fatal编程技术网
  • vue.js/
  • Vue.js 从API检索数据并将其传递到Vuetify表中

Vue.js 从API检索数据并将其传递到Vuetify表中

vue.js vuejs2

Vue.js 从API检索数据并将其传递到Vuetify表中,vue.js,vuejs2,axios,vue-component,vuetify.js,Vue.js,Vuejs2,Axios,Vue Component,Vuetify.js,我被指派做这个项目，作为我申请初级开发人员职位的一部分。我从来没有在Vue.js上工作过，他们给我分配了一个项目，要求从端点检索JSON数据并将其投影到vuetify表中。我的主要问题是vuetify表，我无法理解它与普通html表的区别。此外，我无法理解我是否必须使用html和js文件来制作一个小应用程序，还是必须同时使用node.js并在上面工作。但是，我确实找到了解决方案，我不知道要为vuetify表更改什么 <!--Html file--> <!DOCTYPE

我被指派做这个项目，作为我申请初级开发人员职位的一部分。我从来没有在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);
     });
   }
  })


员工表信息
#
员工姓名
员工工资
员工年龄
轮廓图像
{{employee.id}
{{employee.employee_name}
{{employee.employee_salary}
{{employee.employee_age}
{{employee.profile_image}
===================================================================================================
//App.js文件
//创建需要employee对象数组的vue
var app=新的Vue({
el:“#应用程序”，
数据：{
员工：[]
},
//使用axios获取请求以从api检索数据，然后存储它们
//在employees数组中
挂载：函数（）{
axios.get（）http://dummy.restapiexample.com/api/v1/employees')
。然后（响应=>{
//成功
this.employees=response.data.data；
控制台日志（响应）；
})
.catch（错误=>{
//处理错误
console.log（错误）；
});
}
})
vuetify数据表具有许多功能，如数据分页、排序、自定义呈现和更高级的功能。要使用vuetify数据表，请尝试通过CDN或使用npm/Thread将vuetify库添加到项目中

以下示例显示了一个基本用法：

var-app=新的Vue({
el:“#应用程序”，
vuetify:新的vuetify（），
数据：{
雇员：[{
“id”：“1”，
“员工姓名”：“老虎尼克松”，
“员工工资”：“320800”，
“员工年龄”：“61”，
“配置文件\u图像”：”
},
{
“id”：“2”，
“员工姓名”：“Garrett Winters”，
“员工工资”：“170750”，
“员工年龄”：“63”，
“配置文件\u图像”：”
},
{
“id”：“3”，
“员工姓名”：“Ashton Cox”，
“员工工资”：“86000”，
“员工年龄”：“66”，
“配置文件\u图像”：”
},
{
“id”：“4”，
“员工姓名”：“Cedric Kelly”，
“员工工资”：“433060”，
“员工年龄”：“22”，
“配置文件\u图像”：”
},
{
“id”：“5”，
“员工姓名”：“艾瑞佐藤”，
“员工工资”：“162700”，
“员工年龄”：“33”，
“配置文件\u图像”：”
},
{
“id”：“6”，
“员工姓名”：“Brielle Williamson”，
“员工工资”：“372000”，
“员工年龄”：“61”，
“配置文件\u图像”：”
}
],
标题：[{
文本：“ID”，
值：“id”
},
{
文本：“员工姓名”，
值：“员工姓名”
},
{
文本：“员工工资”，
值：“员工工资”
},
{
文字：“员工年龄”，
值：“员工年龄”
},
]
},
})