In my Vue 3 component, the script code is as follows:
<script>
/* eslint-disable */
export default {
name: "BarExample",
data: dataInitialisation,
methods: {
updateChart,
}
};
function dataInitialisation()
{
return {
chartOptions: {
plotOptions: {
bar: {
horizontal: true
}
},
xaxis: {
//categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999],
categories: [1991, 1992],
}
},
series: [
{
name: "series-1",
data: [30, 40],
}
]
};
}
</script>
The code provided above is functioning correctly.
However, making a slight modification to the dataInitialisation() function as shown below causes the Vue website to display a blank screen without any error messages:
function dataInitialisation()
{
init_data = {
chartOptions: {
plotOptions: {
bar: {
horizontal: true
}
},
xaxis: {
//categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999],
categories: [1991, 1992],
}
},
series: [
{
name: "series-1",
data: [30, 40],
}
]
};
return init_data;
}
Even though both functions seem similar, there seems to be an issue when altering the structure. Furthermore, adding a seemingly irrelevant line of code like x=2 also leads to the same blank page result:
function dataInitialisation()
{
x = 2; //A simple line causing unexpected issues
return {
chartOptions: {
plotOptions: {
bar: {
horizontal: true
}
},
xaxis: {
//categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999],
categories: [1991, 1992],
}
},
series: [
{
name: "series-1",
data: [30, 40],
}
]
};
}