Я пытался выяснить, почему иногда компонент не работает должным образом, но я до сих пор не понимаю, почему в консоли нет информации (нет ошибок, нет предупреждений ...), я использую приведенный ниже скрипт для компонентов гистограммы:
// Chart.js
import { Bar } from 'vue-chartjs'
export default {
extends: Bar,
props: ['data', 'labels'],
mounted() {
// Overwriting base render method with actual data.
this.renderBarChart();
},
computed: {
chartData: function () {
return this.data;
}
},
methods: {
renderBarChart() {
var cdata = {
labels: this.labels,
datasets: [
{
label: '',
backgroundColor: globalSetting.backgroundColors, //global.js loading before
borderColor: globalSetting.borderColor,
borderWidth: 1,
data: this.chartData
}
]
}
let options = {
legend: {
display: false
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Levels'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Numbers'
}
}]
}
}
this.renderChart(cdata, options);
}
},
watch: {
data: function () {
this.renderBarChart();
},
deep: true
}
}
И в моем html,
<div v-if="!loading">
<p>{{c.chartData}} {{labels}}</p>
<bar :data="c.chartData" :labels="labels"></bar>
</div>
Иногда , график строится без информации о столбцах и метках (как на изображении ниже), но <p>{{c.chartData}}{{labels}}</p>
иметь значения. После обновления страницы все правильно. Любая идея? Спасибо