Question

我是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",
    }
  ]
]

Answer 1

您要回复的响应是一个包含另一个数组的数组 - 该数组又包含代表您的音轨的实际对象。

所以内部：<li v-for="track in tracks">@{{ track.name }}</li>，track引用内部数组而不是每个对象。

要进行快速修复，您可以将代码更改为： <li v-for="track in tracks[0]">@{{ track.name }}</li> 并尝试。

但正确的解决方法是修复后端，将结果作为单个对象数组返回。

Answer 2

正如@craig_h所说，你看起来好像是在接收一个对象数组而不是一个对象数组。

我建议你发送一个更好的格式化的json：

[
  {
    "name": "Falling Away - Acoustic (Bonus Track)",
    "track_number": 8,
    "type": "track",
  },
  {
    "name": "Falling Away2 - Acoustic (Bonus Track)",
    "track_number": 9
    "type": "track",
  }
]

如果您无法访问后端，请在fetchStats方法中使用this.tracks.push(response.body[0])。

迭代JSON并在Vue.js中打印值

2 个答案: