How to display Cockpit CMS JSON data with Vue js

Question

I am trying to display Cockpit CMS JSON field with Vue js. However, I am not seeing any data displayed on the page and have no errors with the following code.

JS:

new Vue({
  el: '#story-wrapper',
  data () {
    return {
      stories: []
    }
  },

  methods: {
      loadLogs () {
       this.$http.get('//localhost/cockpit-master/api/collections/get/test?token=31e1edc3b2b4fcaf5a11173b2b8b88')
        .then(function (data) {
          this.data = data.body.entries;
          console.log(this.data);
        })
      }
  },

  mounted () {
    this.$nextTick(function () {
      this.loadLogs();
    })

  }
})

** If I do not use data.body.entries it will display an error of 'undefined' on the console.log(this.data) that follows it.

HTML:

<div class="container"> 
    <ul id="story-wrapper">
      <li v-for="story in stories">
       {{story.name}}
      </li>
    </ul>
  </div>

JSON from Google Dev Tools:

{
   "fields":{
      "name":{
         "name":"name",
         "type":"text",
         "localize":false,
         "options":[

         ]
      }
   },
   "entries":[
      {
         "name":"Andrew Jordan",
         "_by":"59b9d22816fd8doc390436813",
         "_modified":1506177858,
         "_created":1506177858,
         "_id":"59c673426a79ddoc598510688"
      },
      {
         "name":"Bill Gates",
         "_by":"59b9d22816fd8doc390436813",
         "_modified":1507771677,
         "_created":1507771677,
         "_id":"59dec51da6d7adoc607750570"
      }
   ],
   "total":2
}

Please let me know if you have any suggestions or if you spot the issue.

Thank you for your time!

Answer 1

You need to use this.stories in the assignment not this.data

this.stories = data.body.entries;