I recently started incorporating Highcharts into my Vue project using the highcharts-vue library.
A) Initially, in pure JavaScript, the following code snippet functions as expected:
let b = 5;
let data = {
a: b
}
console.log('data', data.a);
The console log displays 5, which is the value of b.
In the Vue and Highcharts combination, I attempted to replicate the same logic. I integrated Highcharts within the Vue template, initially setting its options empty, and then tried to assign numbers to series. The template setup looks like this:
<highcharts ref="chart" :callback="chartcallback" :options="options"></highcharts>and approached it with Vue
B) I initialized variables as empty arrays, passed them to options, and utilized these variables to update options within Vue
data(){
return{
series:[],
options: {
series: this.series,
}
}
}
Now, when I attempt the following actions in Vue:
console.log(this.options.series);
this.series.push({
name:'hello',
data:[]
});
console.log(this.options.series);
The initial console log returns `undefined`, while the second one displays an empty array even after pushing name and data into it. This discrepancy between A) and B) arises confusion – as the operation should be feasible based on prior familiarity in JavaScript. Is this behavior characteristic of Vue or Highcharts?
Another strategy I experimented with involves:
C) Initializing options as empty, defining vars, and equating options to the vars
data(){
return{
options: {
series: [],
}
}
}
Subsequently, upon implementation in Vue:
console.log(this.options.series);
this.series.push({
name:'hello',
data:[]
});
this.options.series = this.series;
console.log(this.options.series);
This method successfully yields results but leaves me pondering why B) does not follow a similar pattern to A) despite their structural similarities. Additionally, the success of C) raises questions since options.series is assigned to a variable post option initialization.
Help me understand why B) differs from A) and why C) succeeds, considering that options.series is set to a variable after initializing options.
Your insights are greatly appreciated!