[Vuejs]-Vue.js http get web api url render list

by

3👍

✅

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)
      })
    })
  }
})
👤nickford

Leave a comment