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

  }
})

**如果我不使用数据。正文。条目，则会显示“未定义”错误。在它后面的console.log（this.data）上。

HTML：

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

Google Dev Tools的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;

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

1 个答案: