无法将 API JSON 数据呈现到 vue js 中的表
Posted
技术标签:
【中文标题】无法将 API JSON 数据呈现到 vue js 中的表【英文标题】：Unable to render API JSON data to table in 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>
【问题讨论】：
【参考方案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 问题。
我已经导入了脚本，没有使用任何捆绑工具，但是表格仍然没有渲染。以上是关于无法将 API JSON 数据呈现到 vue js 中的表的主要内容，如果未能解决你的问题，请参考以下文章
Nativescript-vue TabView 无法呈现来自 API 的第一个项目
无法使用 api 从 axios 获取数据 - vue js
如何从动态列表中为 Vue 中的 API 响应创建列表渲染 JSON？