vue.js http获取web api url渲染列表

Question

我正在使用vue.js来从web api获取一个项目列表并将它们呈现在一个列表中，但是目前列表只呈现八个响应在数组中返回的一个项目，请帮忙！ https://codepen.io/mruanova/pen/mprEap?editors=1111

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.7/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.13/vue-resource.min.js"></script>
<div id="app">
{{projects}}
<ul>
  <li v-for="project in projects">PROJECT {{project.ProjectId}}</li>
</ul>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            projects: []
        },
        ready: function () {
            var self = this;
            const url = "https://246gg84zg8.execute-api.us-west-2.amazonaws.com/prod/projects";
            this.$http.get(url).then(function (data) {
                console.log(JSON.parse(data.response).Items.length)
             console.log(JSON.parse(data.response).Items[0].ProjectId)
                self.$set('projects', JSON.parse(data.response).Items)
            })
        }
    })
</script>

目前的结果：

[object Object]，[object Object]，[object Object]，[object Object]，[object Object]，[object Object]，[object Object]，[object Object]

项目

预期：

项目1项目2项目3项目4项目5项目6项目7项目8项目8

Answer 1

这里有几个问题。首先，你使用的是一个非常古老的Vue版本，至少可以说是不可取的。一旦我清理了你发布的codepen示例，拉入当前版本的Vue，并更新了更加惯用的东西，你的代码的基本概念就可以了。

https://codepen.io/nickforddesign/pen/rpMLgV?editors=1011

new Vue({
  el: '#app',
  data() {
    return {
      projects: []
    }
  },
  created() {
    const url = 'https://246gg84zg8.execute-api.us-west-2.amazonaws.com/prod/projects';
    this.$http.get(url).then(data => {
      const items = JSON.parse(data.response).Items
      items.map(item => {
        // push to the projects array to make sure Vue's reactivity works
        this.projects.push(item)
      })
    })
  }
})