我是 Vue 的新手，我正在尝试从 API 检索 JSON 响应，然后将其打印在我的页面上。
这是我目前所拥有的:
<body>
<div id="mystats" class="container">
<h1>My Top Tracks</h1>
<ol>
<li v-for="track in tracks">@{{ track.name }}</li>
</ol>
<pre>@{{ tracks|json }}</pre>
<button v-on:click="fetchStats">Fetch stats</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.min.js"></script>
<script type="text/javascript">
$vue = new Vue({
el: '#mystats',
data: {
tracks: [],
},
methods: {
fetchStats: function()
{
this.$http.get('/mystatsdata', {params: {type: 'tracks'}}).then((response) => {
this.tracks.push(response.body);
console.log(this.tracks.name);
}, (response) => {
// error callback
});
}
}
})
</script>
</body>
下面是我得到的回复:
[
[
{
"name": "Falling Away - Acoustic (Bonus Track)",
"track_number": 8,
"type": "track",
}
]
]
问题在于:
<ol>
<li v-for="track in tracks">@{{ track.name }}</li>
</ol>
没有打印出轨道名称。
我的控制台没有错误，所以作为 Javascript 和 Vue.js 的新手，我不确定哪里出错了。
如何获取要显示的名称？
编辑
这是包含多个条目的响应(目前限制为 2 个):
[
[
{
"name": "Falling Away - Acoustic (Bonus Track)",
"track_number": 8,
"type": "track",
},
{
"name": "Perfect Strangers",
"track_number": 1,
"type": "track",
}
]
]
最佳答案
您返回的响应是一个包含另一个数组的数组 - 该数组又包含代表您的轨迹的实际对象。
所以里面:<li v-for="track in tracks">@{{ track.name }}</li> , track引用内部数组而不是每个对象。
为了快速修复，您可以将代码更改为:
<li v-for="track in tracks[0]">@{{ track.name }}</li>
并尝试。
但正确的解决方法是修复后端，将结果作为单个对象数组返回。
关于javascript - 在 Vue.js 中迭代 JSON 和打印值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40865660/