[Vuejs]-How to visualize a v-chart in an v-for where each object is the data of the v-chart?

0👍

As in document, you need to pass data and name as options to v-chart

<div v-for="(chart, index) in charts" v-bind:key="index">
    <v-chart
        v-bind:options="getChartOption(chart)"
    </v-chart>
</div> 

You can use methods to format data:

methods: {
    getChartOption(chart) {
        return {
            title: {
                text: chart.bar.title
            },
            responsive: false,
            maintainAspectRatio: false,
            series: [
                {
                    name: chart.bar.title,
                    type: 'bar',
                    data: chart.bar.data
                }
            ],
        }
    }
}

Leave a comment