[Vuejs]-Image with dynamic data vuejs and chart.js

by

0👍

✅

This is the solution, I use props and watch:

Vue.use(VueTables.ClientTable);
Vue.component("bar-chart", {
    extends: VueChartJs.Bar,
    props: ["data", "options"],
    mounted() {
        this.renderLineChart();
    },
    computed: {
        chartData: function () {
            return this.data;
        }
    },
    methods: {
        renderLineChart: function () {
            this.renderChart(
                {
                    labels: ["Sector Comercio", "Sector Servicios"],
                    datasets: [
                        {
                            label: "Consolidado",
                            backgroundColor: "#f87979",
                            data: this.chartData
                        },
                    ],
                },
                { responsive: true, maintainAspectRatio: false }
            );
        }
    },
    watch: {
        data: function () {
            this.renderLineChart();
        }
    }
});



const baseURL = window.location.protocol + "//" + window.location.host;
var app = new Vue({
    el: '#grid',
    data: {
      columns: ['id', 'nombre'],
      objeto: "",
      dataChart: "",
    },
    created: function () {
        this.getDeudas();
    },
    methods: {        
        getDeudas: function () {
            this.$http.get(baseURL + "/Home/ConsultarDeudasHome").then(function (response) {
                this.lista = response.data.data;
                this.objeto = JSON.parse(this.lista);        
                this.dataChart = [this.objeto[0].original, this.objeto[1].original];
            });
        },
    },
})

Leave a comment