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

Posted 2023-02-22

【中文标题】vue.js http 获取 web api url 渲染列表

【英文标题】：vue.js http get web api url render list

【发布时间】：2018-06-04 12:24:59

【问题描述】：

我正在使用 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>

当前结果：

[对象对象],[对象对象],[对象对象],[对象对象],[对象对象],[对象对象],[对象对象],[对象对象]

项目

预期：

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

【问题讨论】：

我看到问题了，数据格式不好，VUE无法读取：[ "Website": "xxx", "Address": "xxx", "Position": "xxx" , "ProjectId": 7, "Name": "xxx" ，但是数据应该是 [ "Project": "Website": "xxx", "Address": "xxx", "Position": " xxx”，“ProjectId”：7，“名称”：“xxx”，

不正确，请看下面我的回答。

【参考方案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)
      )
    )
  
)