Tengo un componente vue 3. El código de script relevante a continuación;
<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>El código anterior funciona bien.
Sin embargo, si tuviera que modificar el código de la función dataInitialisation() en esto;
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; }Con la función anterior, el sitio web de vue quedó en blanco y no apareció ningún mensaje de error. ¿Qué está mal? Ambas funciones me parecen casi iguales.
EDITAR: Noté otro comportamiento extraño. Agregué una línea sin sentido x=2 a la función y esto provocó que el sitio web también se quedara en blanco.
function dataInitialisation() { x = 2; //meaningless line caused website to go blank 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], } ] }; }Responderé a mi propia pregunta. Obtuve la respuesta gracias a @ 3limin4t0r en la sección de comentarios.
Cometí un error de novato. Olvidé el let delante de la variable init_data . No hubo ningún mensaje de error en javascript.
function dataInitialisation() { let 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; }