vue.js http 获取 web api url 渲染列表 [英] vue.js http get web api url render list
问题描述
我正在使用 vue.js 来 http 从 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="应用程序">{{项目}}<ul><li v-for="project in projects">PROJECT {{project.ProjectId}}</li>
<脚本>新的 Vue({el: '#app',数据: {项目:[]},准备好:函数(){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)})}})
当前结果:
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
项目
预期:
项目 1项目二项目三项目 4项目5项目 6项目 7项目 8
这里有几个问题.首先,您使用的是非常 Vue 的旧版本,至少可以说这是不可取的.一旦我清理了您发布的 codepen 示例,引入了 Vue 的当前版本,并将内容更新为更惯用的方式,您的代码的基本概念就可以正常工作了.
https://codepen.io/nickforddesign/pen/rpMLgV?editors=1011
new Vue({el: '#app',数据() {返回 {项目:[]}},创建(){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).Itemsitems.map(item => {//推送到项目数组以确保 Vue 的反应性工作this.projects.push(item)})})}})
I am using vue.js to http get from a web api a list of projects and render them in a list but currently the list is only rendering one items of the eight that response is returning in the array, please help! 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>
current result:
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
PROJECT
expected:
PROJECT 1 PROJECT 2 PROJECT 3 PROJECT 4 PROJECT 5 PROJECT 6 PROJECT 7 PROJECT 8
There are several problems here. First of all, you are using a very old version of Vue, which is inadvisable, to say the least. As soon as I cleaned up the codepen example you posted, pulled in a current version of Vue, and updated things to be more idiomatic, the basic concept of your code works just fine.
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)
})
})
}
})
这篇关于vue.js http 获取 web api url 渲染列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!