Vue 앱을 디버깅하려면 어떻게해야합니까?

Question

RESTful API에서 json을 가져 오는 코드가 있습니다. 하지만 .container 만 보여 주며 항목 배열에는 아무것도 없다고 말합니다. 신비한 것은 그것에 관한 어떤 오류도 보여주지 않는다는 것입니다. 그래서 console.log를 사용하여 가져 오기 결과를 보여주는 디버깅을 시도 했으므로 코드 아래에 let result = await fetch('video').then(res => res.json())처럼 추가했지만 브라우저 콘솔에는 아무 것도 표시하지 않습니다. 그것은 비동기 getData 기능을 실행하지 않습니다하지만 난 단서가없는 것처럼 코드에서 몇 가지 문제가 있습니다

<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

.. 것, 그리고 콘솔은 그들에 대해 경고한다. 그것은 방법에 따라 배치해야하므로

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

가 그럼 난, 비디오 방법으로 얻을 수 추측 개체 :

먼저 ES6 개체 방법 속기 같은 데이터 객체를 정의, 화살표 기능을 피하려고

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

어디서이 메서드를 트리거 할 것인지 (인스턴스가 만들어 지거나 탑재 될 때 클릭 할 때) 알 수 없지만 만든 후크를 사용합니다.