我有一个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>
实际上,如果您使用的是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>
我正面临一个使用Vue呈现字符串的问题。当前,如果HTML标记在不同的行上打开和关闭,例如。 它的呈现方式如下 这导致返回包含冗余空白的字符串。例如。 我发现如果你打开和关闭HTML标签包含一个字符串在同一行,问题就没有了。例如。 问题:我是否可以强制Vue在不设置所有实际HTML格式的情况下呈现没有额外空格的文本,这意味着在不同的行上打开和关闭标签?(我并不是一个人在做这个项目)或者,我能以某种
我正在使用spring Boot创建spring eureka独立应用服务器。但是当我尝试加载eureka服务器仪表板时,错误页面出现了。 pom.xml是 http://maven.apache.org/xsd/maven-4.0.0.xsd“>4.0.0
我正在尝试从父组件到子组件获取数据列表以显示它,但无法执行此操作 当我试图console.log子它显示的数据,但无法返回div和渲染到屏幕 算法的设计与分析 计算机体系结构 数据库管理系统 微处理机 概率与统计 关系数据库管理系统实验室 微处理机 编程
问题内容: 在AngularJS中,如何在不进行2向数据绑定的情况下呈现值?出于性能方面的考虑,甚至可能在给定的时间点呈现值,可能要这样做。 以下示例均使用数据绑定: 我如何在 没有任何 数据绑定的 情况下 进行渲染? 问题答案: 角度1.3+ 在1.3中,Angular使用以下语法支持此功能。 正如在这个答案中提到的。 Angular 1.2以下 这很简单,不需要插件。看一下这个。 这个小指令可
请告诉我为什么在qracle insert qquery beow是查询下面得到错误 我得到的错误是 仅供参考,表的结构为