In my HTML file, I have implemented fetching data from an API and displaying it in a table successfully.
Now, I am trying to convert the HTML file to use Vue.js, but encountering some issues. Despite being able to fetch data from the API with Vue, the table is not showing on the webpage. (I have exported JSONTable.vue and imported it into App.vue for access)
The external sources used in my HTML files that draw the table successfully are:
<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" />
To address template errors in Vue, I replaced them within the script tag as follows:
import JQuery from 'jquery'
let $ = JQuery
How can I incorporate the external stylesheet and script mentioned above in Vue without the need for 'import JQuery' (to avoid '$ is not defined' error)?
Here is a snippet of my Vue site:
<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>