마운트 된 후크에 정의 된 메서드, Vue JS

Question

그래서 Laravel 5.3을 사용하고 있으며 DataTable을 만들려고하고 있습니다. 백엔드에서 데이터를 가져 오는 메서드를 만들려고합니다. 구성 요소가 준비되면 바로 호출 할 수 있습니다.

나는 ready() 훅이 이제 죽었고 mounted()로 바뀌 었음을 발견했다. 그런 식으로 내 템플릿은 이렇게 생겼다.

<template> 
..Simple Bootstrap table... 
</template> 

<script> 
    export default { 
     data:() => { 
      return { 
       searchQuery: "", 
       columns: ['ID', 'Name', 'Campaign', 'Method', 'Limit Per Connection', 'Limit Per Day', 'Active', 'Last Ran'], 
       lastId: 0, 
       rowsPerPage: 10, 
       gridData: [ 
        { id: 1, name: "Example 1", campaign: 3412, method: "POST", limitConn: 1250, limitDay: 50, active: "Yes", lastRun: "2016-11-27 18:42:21"}, 
        { id: 2, name: "Example 1", campaign: 3412, method: "POST", limitConn: 1250, limitDay: 50, active: "Yes", lastRun: "2016-11-27 18:42:21"}, 
        { id: 3, name: "Example 1", campaign: 3412, method: "POST", limitConn: 1250, limitDay: 50, active: "Yes", lastRun: "2016-11-27 18:42:21"}, 
        { id: 4, name: "Example 1", campaign: 3412, method: "POST", limitConn: 1250, limitDay: 50, active: "Yes", lastRun: "2016-11-27 18:42:21"}, 
        { id: 5, name: "Example 1", campaign: 3412, method: "POST", limitConn: 1250, limitDay: 50, active: "Yes", lastRun: "2016-11-27 18:42:21"}, 
        { id: 6, name: "Example 1", campaign: 3412, method: "POST", limitConn: 1250, limitDay: 50, active: "Yes", lastRun: "2016-11-27 18:42:21"}, 
        { id: 7, name: "Example 1", campaign: 3412, method: "POST", limitConn: 1250, limitDay: 50, active: "Yes", lastRun: "2016-11-27 18:42:21"} 
       ] 
      } 
     }, 
     methods: { 
      /** 
      * Fetch JSON data for crons from the Backend 
      * 
      * @param lastId - The last ID in the current data 
      */ 
      fetchData: (lastId) => { 
       Vue.http.get('/data').success((response) => { 

        console.log(response); 

       }).error((response) => { 

        console.error(response); 

       }) 
      }, 
     }, 
     mounted:() => { 
      // When the Component is ready fetch the JSON from the Server Backend 
      this.fetchData(0); 
     }, 
    } 
</script> 

<style>...My Css...</style> 

마운트 된 방법 화재하지만 내가 무슨 일을하고 있어요 this$1.fetchData is not defined 어떤 생각이 있다고? Mounted hook이 내 메소드에 액세스 할 수 없습니까? mounted에 대한

Answer 1

구문은 다음과 같이해야합니다 :

mounted() { 
    // When the Component is ready fetch the JSON from the Server Backend 
    this.fetchData(0); 
} 

Don't use arrow function for lifecycle hooks

는 화살표 기능은 우리를 위해 바인딩 할 수 없습니다 자신의 상황과 VUE에 의해 결정 어휘 this를 사용합니다.