How to pick variable that is in method and put in date ? Vue

Question

I’m taking driver data in the api and seeing how many there are such categories (this is in the method). Right after I want to put this information on the chart (datasets) but I’m not getting it.

With this I want to put the information I generated in the methods (list) where you have the categories and put in the datasets (date) these values.

    data() {

        return {

            motoristas: [],
            categoriaC: null,
            categoriaD: null,
            categoriaE: null,

            labels: ["C", "D", "E"],
            datasets: [
                {

                    data: [this.categoriaC, this.categoriaD, this.categoriaE],
                    backgroundColor: ["Red","Yellow","Purple"]
                }
            ],
            option: {
                title: {
                display: true,
                position: 'bottom',
                text: 'Carteira'
                }
            }
        }
    },

    mounted() {
        this.listar()
    },

    methods: {
        listar(){
            Motorista.listar().then(resposta => {
            console.log(resposta.data)
            this.motoristas = resposta.data
            const categoriaC = this.motoristas.filter(m => m.categoria == 3).length;
            const categoriaD = this.motoristas.filter(m => m.categoria == 4).length;
            const categoriaE = this.motoristas.filter(m => m.categoria == 5).length;
            })
        }
    },
}
</script>

Complete Code:

    <div class="main">
       <chartjs-doughnut v-bind:labels="labels" v-bind:datasets="datasets" v-bind:option="option"></chartjs-doughnut>

    </div>
</template>


<script>

    import Motorista from '../services/motoristas'
    import axios from 'axios'

export default {
    data() {

        return {

            motoristas: [],
            categoriaC: ,
            categoriaD: null,
            categoriaE: null,

            labels: ["C", "D", "E"],
            datasets: [
                {

                    data: [this.categoriaC, this.categoriaD, this.categoriaE],
                    backgroundColor: ["Red","Yellow","Purple"]
                }
            ],
            option: {
                title: {
                display: true,
                position: 'bottom',
                text: 'Carteira'
                }
            }
        }
    },

    mounted() {
        this.listar()
    },

    methods: {
        listar(){
            Motorista.listar().then(resposta => {
            console.log(resposta.data)
            this.motoristas = resposta.data
            const categoriaC = this.motoristas.filter(m => m.categoria == 3).length;
            const categoriaD = this.motoristas.filter(m => m.categoria == 4).length;
            const categoriaE = this.motoristas.filter(m => m.categoria == 5).length;
            })
        }
    },
}
</script>

<style scoped>

</style>

Answer 1

Rewrites the datasets within the method listar.

That is, if the initial dataset is

datasets: [
    {
        data: [this.categoriaC, this.categoriaD, this.categoriaE],
        backgroundColor: ["Red","Yellow","Purple"]
    }
],

You can do:

listar() {
  Motorista.listar().then(resposta => {
    this.motoristas = resposta.data
    const data = this.motoristas.reduce((arr, m) => {
        const index = m.categoria - 3;
        arr[index] = (arr[index] || 0) + 1;
    }, []);
    this.datasets = {
     ...this.datasets,
     data
    };
  })
}

In fact I would be part of this a computed Property... ie:

methods: {
  listar() {
    Motorista.listar().then({data} => this.motoristas = data);
  }
},
computed: {
  datasets(){
    const data = this.motoristas.reduce((arr, m) => {
      const index = m.categoria - 3;
      arr[index] = (arr[index] || 0) + 1;
    }, []);
    return {
       backgroundColor: ["Red","Yellow","Purple"],
       data
    };
  }
}