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

Posted 2023-02-22

【中文标题】如何使用 Vue js 显示 Cockpit CMS JSON 数据

【英文标题】：How to display Cockpit CMS JSON data with Vue js

【发布时间】：2018-03-23 20:04:24

【问题描述】：

我正在尝试使用 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

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

感谢您的宝贵时间！

【参考方案1】：

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

this.stories = data.body.entries;