如何从对象内部访问vuejs方法? (Vuejs 2)

时间:2017-12-25 11:20:16

标签: javascript methods charts vuejs2

我想从Chart对象访问getValue方法,但我得到函数undefined。

<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>

我理解它是因为Chart是一个对象而this指向它,但是如何解决这个问题并从回调中访问我的方法?

我想如果将export default ...设置为variable,那么我可以通过variable.methods.getValue访问我的方法,但在这种情况下我如何实现目标?

1 个答案:

答案 0 :(得分:1)

在创建new Chart()之前,将其分配给变量self:var self = this;。 然后,您可以通过self访问您的组件属性。