问题描述
利用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>