Wie kann ich die Vue App debuggen?

Question

Ich habe einen Code, der Json von RESTful API bekommt. aber es zeigt nur .container und es sagt, dass es nichts im artikel artikel gibt. Das Geheimnisvolle ist, dass es keine Fehler zeigt. also habe ich versucht, es zu debuggen Ergebnis von fetch mit console.log anzuzeigen, so habe ich wie let result = await fetch('video').then(res => res.json()) unter dem Code hinzugefügt, aber es zeigt nichts auf der Browser-Konsole. scheint, wie es nicht die async getData Funktion laufen, aber ich habe keine Ahnung ..

<template lang="pug"> 
.container 
    .columns(v-for="n in lines") 
    .column.is-3.vid(v-for='item in items') 
     .panel 
     p.is-marginless 
     a(:href='item.videoId') 
      img(:src='item.thumbnail') 
     .panel.vidInfo 
      .columns.hax-text-centered 
      .column 
       .panel-item.reddit-ups 
       span {{ item.score }} 
       i.fa.fa-reddit-alien.fa-2x 
       .panel-item.reddit-date 
       i.fa.fa-calendar.fa-2x 
</template> 
<script> 
export default { 
     name: 'main', 

     data:() => ({ 
     items: [], 
     lines: 0 
     }), 

     async getVideo() { 
     this.items = await fetch('/video').then(res => res.json())  
     this.lines = Math.ceil(this.items.length/4) 

     } 
    } 
    </script> 

Answer 1

paar Probleme in Ihrem Code Es gibt, und Konsole sollten Sie über sie warnen.

Erste Daten definieren Objekt als ES6 Objektmethode Stenografie, versuchen Pfeil Funktionen zu vermeiden:

data() { 
    return { 
    items: [], 
    lines: 0 
    } 
} 

Dann denke ich Video-Methode ist, so sollte es das Objekt unter den Methoden gesetzt werden:

methods: { 
    async getVideo() { 
     this.items = await fetch('/video').then(res => res.json())  
     this.lines = Math.ceil(this.items.length/4) 
    } 
} 

ich weiß nicht, wo Sie diese Methode auslösen soll (auf klicken, wenn Instanz erstellt oder montiert), aber ich werde Haken

<script> 
export default { 
     name: 'main', 

     data() { 
     return { 
      items: [], 
      lines: 0 
     } 
     }, 

     methods: { 
     // I don't think you need async/await here 
     // fetch would first return something called blob, later you can resolve it and get your data 
     // but I suggest you to use something like axios or Vue reource 
     async getVideo() { 
      await fetch('/video') 
       .then(res => res.json()) 
       .then(items => this.items = items)  
      this.lines = Math.ceil(this.items.length/4) 
     } 
     }, 

     created() { 
     this.getVideo() 
     } 
    } 
    </script> 

erstellt verwenden