如何使用具有 ES6 标准的 vuejs 转换以下 JavaScript 逻辑

Question

I have a JavaScript file, and I want the same logic to be implemented using Vuejs with ES6 standards. I want to add this logic in "LineChart.vue" and then i will import it to my parent.vue in order to display charts.

As in vuejs there are lots of life cycle hook methods, as I'm new to vuejs I don't know to how implement this same logic in vuejs. Please help me with this.

The code is here:

function chart_shot(type, id, interval) {
    $.ajax({
        type: "GET",
        url: getApiUrl("find/" + type + "?interval=" + interval),
        headers: {
            "api_key": ''
        },
        cache: true,
        timeout: 30,
        dataType: "json",
        success: function (data) {
            var ctx = document.getElementById(id);

        var highChart = [];
        for(i = 0; i < data["date"].length; i++) {
            highChart.push({
                t: moment(data["date"][i], "X").toDate(),
                y: data["challenges"][i]
            })
        }

        if(my !== undefined) {
            my.destroy();
        }

        my = new Chart(ctx, {
            type: 'line',
            data: {
                datasets: [{
                    label: "challenges",
                    data: highChart,
                }]
            },
            options: {
                lineTension: 0,
                maintainAspectRatio: false,
                legend: {
                    display: false
                },
                scales: {
                    yAxes: [{
                        scaleLabel: {
                            display: false
                        },
                        ticks: {
                            beginAtZero: true,
                            callback: function (value, index, values) {
                                return value + '%';
                            }
                        }
                    }],
                    xAxes: [{
                        type: 'time',
                        time: {
                            unit: 'month'
                        },
                        scaleLabel: {
                            display: true,
                            labelString: ''
                        },
                    }]
                }
            }
        });
    }
});

}

Please help me with this as I am new to vuejs I don't know effective way of writing this code in vuejs.

And please do tell me in which file type it can be done, i mean in js or vue?

And how the written code can be used in other vue component.

Answer 1

https://codesandbox.io/s/dry-cache-ilesg

Here is a little demo for the VueJS app related to your question. Please check it out you will get some idea about how it's working.