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

【问题标题】：Unable to render API JSON data to table in vue js无法将 API JSON 数据呈现到 vue js 中的表
【发布时间】：2019-12-02 18:21:01
【问题描述】：

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

我正在尝试将 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 中使用上面的外部样式表和脚本并允许我摆脱“import JQuery”（因为如果我删除 import 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>

【问题讨论】：

标签： jquery html css json vue.js

【解决方案1】：

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

我创建了this example 来向您展示如何在没有 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>

【讨论】：

“其实，如果你在使用 Vue，你应该尽量避免使用 Jquery，在 99% 的情况下，这是没有必要的。” - 我没有认为两者具有相同的目的，我不同意你的说法。特别是考虑到您必须通过实现fetch polyfill 来弥补 jQuery 的不足。不是说 jQuery 总是必要的，但我强烈反对“如果你使用 X，就不要使用 Y”。
可能在某些情况下 Jquery 可以提供帮助，有一些有趣的插件。如果您使用 Jquery 更改 DOM，您可能会遇到 vue 的问题，它不会对您的更改做出反应，这不是推荐的方式。而且，如果您不打算使用 Jquery 操作 DOM，那么使用整个 lib 来进行 ajax 调用并执行 foreach 循环（您可以在本机进行）是过大的。重点不是“如果你使用 X，就不要使用 Y”，问题只是将 Jquery 与 Vue/React/Angular/... /跨度>
感谢您的帮助，继续 OBS 2 如果我不使用 jquery，JavaScript 函数会是什么样子？需要定义项目和列表，但我不确定如何在代码中编写它。我也在使用来自这个 API 的没有 CORS 问题的数据：dummy.restapiexample.com/api/v1/employees
"如果我不使用 jquery，JavaScript 函数会是什么样子"：如果您使用 webpack 之类的工具进行捆绑，您只需安装 pollify 并将其添加到您的 main .js 文件。如果您没有使用任何捆绑工具，只是在 html 文件中添加脚本，则只需导入它，就像我在 codepen 示例中所做的那样。如果您的浏览器已经实现了 window.fetch，则 pollify 不会做任何事情。 “我也在使用来自这个 API 的没有 CORS 问题的数据”，如果您尝试将其加载到 codepen 或此处的 CORS 问题。
我已经导入了脚本，没有使用任何捆绑工具，但是表格仍然没有渲染。