个人中心
gpt4 book ai didi

jquery - 无法将 API JSON 数据呈现到 vue js 中的表

转载 作者：太空宇宙 更新时间：2023-11-04 06:02:15 27 4
gpt4 key购买 nike

我有这个 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% 的情况下，这是没有必要的。

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

关于jquery - 无法将 API JSON 数据呈现到 vue js 中的表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57185579/

27 4 0
文章推荐： css - GSAP 笔划动画 strokeDashoffset 无法正常工作
文章推荐： c++ - read() 缓冲区有无效数据(指针问题？)
文章推荐： c - 出现错误，C 中的 "conflicting types for ' _'"。很抱歉再次问这个问题，我要么不理解，要么有其他问题
文章推荐： python - 使用 pip 安装卡在软件包许可协议(protocol)上
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com