Question

我有这个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中使用上面的外部样式表和脚本，并允许它摆脱“ 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>

Answer 1

实际上，如果您使用的是Vue，则应尝试避免在99％的时间中避免使用Jquery。

我创建了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>

无法将API JSON数据呈现到Vue JS中的表

1 个答案: