Vue解决方案 AJAX Axios填入table时表格数据不显示

HMS Howe

已于 2022-05-20 17:50:04 修改

阅读量703

点赞数

分类专栏：解决方案文章标签： vue.js 前端 javascript ajax

于 2022-05-20 16:03:05 首次发布

本文链接：https://blog.csdn.net/Winchester_Y/article/details/124885114

版权

解决方案专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文档展示了在Vue.js应用中使用axios从JSON文件动态加载数据并填充表格时遇到的问题。问题在于表格单元格未能正确显示链接数组的内容。分析指出，问题在于试图直接访问数组而不是通过索引来获取元素。解决方案是在模板中使用`v-for`循环并结合索引访问数组元素。修正后的代码成功地将JSON数据动态显示在了表格中。

摘要由CSDN通过智能技术生成

问题描述

利用axios动态写入table时无法显示

问题代码展示

json文件

{
  "name": "HMS Howe",
  "links": [
    {
      "name": "B站",
      "url": "https://www.bilibili.com/"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

html文件

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>

<body>
    <div id="vue">
        <div>{{info.name}}</div>
        <table>
            <thead>
                <tr>
                    <td>名称</td>
                    <td>链接</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(p,index) in info.links" :key="p.id">
                    <td>{{info.links.name}}</td>
                    <td>{{info.links.url}}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        var vm = new Vue({
            el: '#vue',
            data() {
                return {
                    info: {
                        name: null,
                        links: [
                            {
                                name: null,
                                url: null
                            }
                        ]
                    }
                }
            },
            mounted() {
                axios.get('./a.json').then(response => (this.info = response.data))
            }
        })
    </script>
</body>

</html>

问题分析

传入html的数据为数组，想要展示需要增加索引

解决方案

在表格td中按照数组的形式进行编写

            <tbody>
                <tr v-for="(p,index) in info.links" :key="p.id">
                    <td>{{info.links[index].name}}</td>
                    <td>{{info.links[index].url}}</td>
                </tr>