So zeigen Sie Cockpit CMS JSON-Daten mit Vue an js

Question

Ich versuche, Cockpit CMS JSON-Feld mit Vue js anzuzeigen. Ich sehe jedoch keine Daten auf der Seite angezeigt und habe keine Fehler mit dem folgenden 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(); 
    }) 

    } 
}) 

** Wenn ich Daten nicht verwenden. body .Einträge wird ein Fehler von 'undefined' in der console.log (this.data) angezeigt, die darauf folgt.

HTML:

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

JSON von Google-Entwicklungstools:

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

Bitte lassen Sie mich wissen, wenn Sie irgendwelche Vorschläge haben, oder wenn Sie das Problem erkennen.

Vielen Dank für Ihre Zeit!

Answer 1

Sie müssen this.stories in der Zuordnung verwenden, nicht this.data

this.stories = data.body.entries;