Визуализация меток и данных с помощью цикла внутри vue-chart.js

Question

Как отобразить данные с помощью цикла

(для; v-для) внутри: { метки : []} и наборов данных: [{data: []}]

в диаграмме с использованием (Vue-Chart.js)

data: {
                    labels: [

                        ***HERE***

                    ],
                    datasets: [{
                        label: "Assets",
                        backgroundColor: ["#4285F6"],
                        data: [

                            ***HERE***

                        ],                 
                    }],
                },

До сих пор мои данные (рендеринга) (массив, внутри него - несколько объектов - и внутрикаждый объект все мои данные нужны):

LABELS: 
this.array[0] ? this.array[0].asset.name : '',
this.array[0] ? this.array[1].asset.name : '',
this.array[0] ? this.array[2].asset.name : '',

DATASETS:
this.array[0] ? this.array[0].amount : '',
this.array[0] ? this.array[1].amount : '',
this.array[0] ? this.array[2].amount : '',  

Answer 1

Перед настройкой диаграммы создайте новый массив и используйте его:

var labelsArray = [];
var amountArray = [];
for (var i = 0; i < this.array.length; i++) {
    labelsArray.push(this.array[i] ? this.array[i].asset.name : '');
    amountArray.push(this.array[i] ? this.array[i].amount : '');
}

Конфигурация диаграммы Vue будет выглядеть следующим образом:

data: {
    labels: labelsArray ,
    datasets: [{
        label: "Assets",
        backgroundColor: ["#4285F6"],
        data: amountArray,                 
    }],
},