javascript - 如何使用 Vue js 显示 Cockpit CMS JSON 数据

Question

我正在尝试使用 Vue js 显示 Cockpit CMS JSON 字段。但是，我没有看到页面上显示任何数据，并且以下代码没有错误。

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();
    })

  }
})

** 如果我不使用 data.body.entries，它将在其后的 console.log(this.data) 上显示“未定义”错误。

HTML:

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

来自 Google 开发工具的 JSON:

{
   "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
}

如果您有任何建议或发现问题，请告诉我。

感谢您的宝贵时间!

Answer 1

你需要在作业中使用 this.stories 而不是 this.data

this.stories = data.body.entries;