我刚刚开始使用Vue和JSON，我正在尝试下面的例子。
我从tastdive.com获取数据，像这样:
https://tastedive.com/api/similar?q=cannibal+corpse
结果是:
{
"Similar": {
"Info": [
{
"Name": "Cannibal Corpse",
"Type": "music"
}
],
"Results": [
{
"Name": "Death",
"Type": "music"
},
{
"Name": "Deicide",
"Type": "music"
},
{
"Name": "Carcass",
"Type": "music"
},
{
"Name": "Slayer",
"Type": "music"
},
{
"Name": "Morbid Angel",
"Type": "music"
},
{
"Name": "Sepultura",
"Type": "music"
},
{
"Name": "Nile",
"Type": "music"
},
{
"Name": "Dying Fetus",
"Type": "music"
},
{
"Name": "Behemoth",
"Type": "music"
},
{
"Name": "Six Feet Under",
"Type": "music"
},
{
"Name": "Lamb Of God",
"Type": "music"
},
{
"Name": "Vader",
"Type": "music"
},
{
"Name": "Bloodbath",
"Type": "music"
},
{
"Name": "Amon Amarth",
"Type": "music"
},
{
"Name": "Obituary",
"Type": "music"
},
{
"Name": "Aborted",
"Type": "music"
},
{
"Name": "Immortal",
"Type": "music"
},
{
"Name": "Dark Funeral",
"Type": "music"
},
{
"Name": "Kreator",
"Type": "music"
},
{
"Name": "Decapitated",
"Type": "music"
}
]
}
}
在名为app.js
的文件中使用以下代码const vm = new Vue({
el: '#app',
data: {
results: []
},
mounted() {
axios.get("https://tastedive.com/api/similar?q=cannibal+corpse")
.then(response => {this.results = response.data.results})
}
});
我的HTML是这样的:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello, world!</title>
</head>
<body>
<div class="container-xxl">
<h1>Hello, world!</h1>
</div>
<div class="container" id="app">
<div class="" v-for="result in results">
<div class="card">
<div class="card-divider">
{{ result.name }}
</div>
<div class="card-section">
<p>{{ result.type }}.</p>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="app.js"></script>
</body>
</html>
然而，我没有得到任何结果到页面。
任何指导或帮助我做错了什么将非常感激。谢谢。
编辑:
主要问题是路径
response.data.results
应该读:
response.data.Similar.Results
反映JSON结构。
正如下面的评论所指出的，我得到了CORS错误。我注册了一个API Key，它没有解决这个问题。我已经联系了tastdive.com，询问他们是否有解决这个问题的指导。我使用浏览器插件来解决本地问题(https://chrome.google.com/webstore/detail/moesif-origin-cors-change/digfbfaphojjndkpccljibejjbppifbc)
谢谢大家的帮助。
我已经用答案更新了原来的问题。