개체 내부에서 vuejs 메서드에 액세스하는 방법? (Vuejs 2)

Question

Chart 개체에서 getValue 메서드에 액세스하려고하지만 함수가 정의되지 않은 상태가됩니다.

<template> 
    <div> 
     <canvas width="600" height="400" ref="canvas"></canvas> 
    </div> 
</template> 
<script> 
    import Vue from 'vue'; 
    import Chart from 'chart.js'; 
    import Axios from 'axios'; 

    export default { 
     mixins: [DateRangeMixin], 
     props: { 
      // other props... 
      callback: false, 
     }, 

     data() { 
      return { 
       chart: '', 
      }; 
     }, 

     mounted() { 
     // ... 
     }, 

     methods: { 

     //other methods..., 
       getValue(data) { 
        if (data === 1) { 
         return 'Up' 
        } else if(data === 0) { 
         return 'Down'; 
        } 
       }, 
      render(data) { 
       this.chart = new Chart(this.$refs.canvas, { 
        type: 'line', 
        data: { 

         labels: Object.keys(data), 
         datasets: [{ 
          // a lot of data ....     
          data: Object.values(data), 

         }] 

        }, 
        options: { 
         scales: { 
          yAxes: [{ 
           ticks: { 
            beginAtZero: true, 
            callback(label, index, labels) { 
             return this.getValue(label); // <-- Tried this and got: 'this.getValue is not a function'. I understand it bounces to new Chart object, but how to resolve this? 
            } 
           } 
          }] 
         } 
        } 

       }); 

      }, 
     }, 
    }; 
</script> 

나는 차트가 객체와 this 그것을 가리키는 그것 때문에 이해하지만 어떻게이 문제를 해결 않으며 콜백에서 내 방법에 액세스?

export default ... variable으로 설정하면 variable.methods.getValue을 통해 내 방법에 액세스 할 수 있지만이 시나리오에서는 목표를 어떻게 달성 할 수 있습니까?

Answer 1

new Chart()을 생성하기 바로 전에 이것을 변수 self에 할당하십시오 : var self = this;. 그러면 self을 통해 구성 요소 속성에 액세스 할 수 있습니다.