我是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>
并尝试.
但正确的解决方法是修复后端,将结果作为单个对象数组返回.
| 归档时间： |
|
| 查看次数： |
8909 次 |
| 最近记录： |