问题：

无法将API JSON数据呈现到vue js中的表中

易成双

2023-03-14

我有一个html文件，它从API中获取数据并将其呈现到一个表中，它从那里成功地工作。

我正在尝试将html文件转换为vue，但我遇到了一些问题，尽管vue可以从API获取数据，但它根本不会在网页上显示该表（尽管我已导出JSONTable.vue并将其导入App.vue，以便App.vue可以访问JSONTable.vue页面）

从html文件中，我使用了以下两个外部源成功地绘制了表格：

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

但是我在标签中用这个替换了它，因为vue抛出了模板错误，它修复了模板问题：

import JQuery from 'jquery'
let $ = JQuery

如何在vue中使用上面的外部样式表和脚本，并允许它摆脱“导入JQuery”（因为如果我删除导入JQuery，它会说$未定义）？

我的vue站点：

<template>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <!-- styling the table with an external css file -->
    <body>
        <div class="container">
            <div class="table-responsive">
                <h1>JSON data to HTML table</h1>
                <br />
                <table class="table table-bordered table-striped" id="tracerouteTable">
                    <tr>
                        <th>id</th>
                        <th>name</th>
                        <th>salary</th>
                        <th>age</th>
                        <th>image</th>
                    </tr>
                </table>
            </div>
        </div>
    </body>
</head>
</template>

<script>

export default {
    name: 'JSONTable'
}


import JQuery from 'jquery'
let $ = JQuery 



$(document).ready(function(){
    $.getJSON("http://dummy.restapiexample.com/api/v1/employees", function(data){
        var employeeData = '';

        console.log(data);

        $.each(data, function(key, value){
            employeeData += '<tr>';
            employeeData += '<td>'+value.id+'</td>';
            employeeData += '<td>'+value.employee_name+'</td>';
            employeeData += '<td>'+value.employee_salary+'</td>';
            employeeData += '<td>'+value.employee_age+'</td>';
            employeeData += '<td>'+value.profile_image+'</td>';
            employeeData += '<tr>';
        });
        $('#tracerouteTable').append(employeeData);
    });
});

</script>

扈昀

2023-03-14

实际上，如果您使用的是Vue，那么应该尽量避免使用Jquery，在99%的情况下，这是没有必要的。

我创建这个例子是为了向您展示如何在没有JQuery的情况下完成它。只要观察两点：

OBS 1：这在这个例子中不起作用，因为CORS不允许在这里加载这个数据，因为我使用的是模拟数据

OBS 2：我使用fetch来发出http请求，要使它在所有浏览器中都能工作，您必须使用类似github fetch的polyfill

const initialData = () => {
  return Promise.resolve([
    {"id":"40877","employee_name":"Lexie","employee_salary":"3331","employee_age":"60","profile_image":""},{"id":"40878","employee_name":"Randi","employee_salary":"9608","employee_age":"29","profile_image":""},{"id":"40879","employee_name":"Wilber","employee_salary":"9626","employee_age":"58","profile_image":""},{"id":"40881","employee_name":"Jena","employee_salary":"3669","employee_age":"47","profile_image":""},{"id":"40882","employee_name":"Annetta","employee_salary":"8428","employee_age":"45","profile_image":""},{"id":"40883","employee_name":"Blaze","employee_salary":"9090","employee_age":"60","profile_image":""},{"id":"40884","employee_name":"Vida","employee_salary":"8633","employee_age":"54","profile_image":""},{"id":"40885","employee_name":"Tyrese","employee_salary":"1133","employee_age":"55","profile_image":""},{"id":"40888","employee_name":"Assunta","employee_salary":"8291","employee_age":"37","profile_image":""},{"id":"40889","employee_name":"Talon","employee_salary":"7896","employee_age":"35","profile_image":""},{"id":"40891","employee_name":"Selina","employee_salary":"6091","employee_age":"68","profile_image":""},{"id":"40892","employee_name":"Madyson","employee_salary":"2057","employee_age":"39","profile_image":""}])
}

new Vue({
  el: '#app',
  data: function (){
    return {
      list: []
    }
  },
  mounted: async function (){
    /*
     OBS 1:this will not work in this example, because the CORS don't allow to load this data here
     because that I'm using mocked data
     
     OBS 2: I'm using fetch to make the http request, to make it works in all browser you have tu use a pollify
     like https://github.com/github/fetch/
    */
    
    
     //const response = await fetch("//dummy.restapiexample.com/api/v1/employees")
     //this.list = await response.json()
    this.list = await initialData()
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
<div id="app">
  <div class="table-responsive">
    <h1>JSON data to HTML table</h1>
    <br />
    <table class="table table-bordered table-striped" id="tracerouteTable">
      <thead>
        <tr>
          <th>id</th>
          <th>name</th>
          <th>salary</th>
          <th>age</th>
          <th>image</th>
        </tr>
       </thead>
      <tbody>
        <tr v-for="item in list" :key="item.list">
          <td>{{item.id}}</td>
          <td>{{item.employee_name}}</td>
          <td>{{item.employee_salary}}</td>
          <td>{{item.employee_age}}</td>
          <td>{{item.profile_image}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

无法将API JSON数据呈现到vue js中的表中

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档