CODEWITHSUNDEEP
javascriptmethodschartsvuejs2
Dr. House
Dr. House

Reputation: 562

How to access vuejs method from inside an object ? (Vuejs 2 )

I want to access getValue method from Chart object, but I get function 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>

I understand that it's because Chart is an object and this is pointing to it, but how do I resolve this and access my method from the callback ?

I imagine if that export default... would be set to a variable, then I could access my method via variable.methods.getValue , but in this scenario How can I achieve my goal ?

Upvotes: 1

Views: 290

Answers (1)

David Heremans
David Heremans

Reputation: 671

Right before you create the new Chart() assign this to a variable self: var self = this;. You can then access your component properties throughself.

Upvotes: 1

Related Questions