I am currently utilizing vue.js to make an http request to a web api in order to retrieve a list of projects and display them in a list. However, I am encountering an issue where only one item from the response array of eight items is being rendered. Any assistance would be greatly appreciated! 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