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

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

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

    } 
})

**如果我不使用的数据。 body .entries它会在console.log（this.data）后面显示'undefined'错误。

HTML：

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

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 
}

请让我还是知道，如果您有任何建议，如果你发现了问题。

谢谢你的时间！

来源

2017-10-12 user2305363

您需要在分配不this.data

this.stories = data.body.entries;

使用this.stories

来源

2017-10-12 02:31:52

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

回答

相关问题