Passing data from external js file to vue component

Question

I'm trying to pass data from external data.js file to the component so that it can be used in it. However I'm getting error that the data is not defined.

Here is my data.js file

const data = [
  {
    chartOptions: {
      chart: {
        type: "boxplot",
        inverted: true,
        height: 200
      },
      credits: {
        enabled: false
      },
      legend: {
        enabled: false
      },
      series: [
        {
          name: "Observations",
          data: [[100, 221, 250, 300, 411]]
        },
        {
          name: "Company name",
          color: "yellow",
          type: "scatter",
          data: [[0, 200]],
          marker: {
            fillColor: "yellow",
            lineWidth: 1,
            lineColor: "yellow"
          }
        }
      ]
    }
  },
  {
    chartOptions2: {
      chart: {
        type: "boxplot",
        inverted: true,
        height: 200
      },
      credits: {
        enabled: false
      },
      legend: {
        enabled: false
      },
      series: [
        {
          name: "Observations",
          data: [[120, 231, 222, 320, 321]]
        },
        {
          name: "Company name 2",
          color: "yellow",
          type: "scatter",
          data: [[0, 210]],
          marker: {
            fillColor: "yellow",
            lineWidth: 1,
            lineColor: "yellow"
          }
        }
      ]
    }
  }
];

export default data;

And here is the component where I need to use data:

<template>
  <div>
    <highcharts class="hc" :options="chartOptions" ref="chart"></highcharts>
    <highcharts class="hc" :options="chartOptions2" ref="chart"></highcharts>
  </div>
</template>

<script>
import data from "./data.js";

export default {
  data () {
    return {
      data
    }
  }
};
</script>

You can also try this on codesandbox

Answer 1

Convert your data.js to object (now it's an array):

const data = {
    chartOptions: {
      chart: {
        type: "boxplot",
        inverted: true,
        height: 200
      },
      credits: {
        enabled: false
      },
      legend: {
        enabled: false
      },
      series: [
        {
          name: "Observations",
          data: [[100, 221, 250, 300, 411]]
        },
        {
          name: "Company name",
          color: "yellow",
          type: "scatter",
          data: [[0, 200]],
          marker: {
            fillColor: "yellow",
            lineWidth: 1,
            lineColor: "yellow"
          }
        }
      ]
    },
    chartOptions2: {
      chart: {
        type: "boxplot",
        inverted: true,
        height: 200
      },
      credits: {
        enabled: false
      },
      legend: {
        enabled: false
      },
      series: [
        {
          name: "Observations",
          data: [[120, 231, 222, 320, 321]]
        },
        {
          name: "Company name 2",
          color: "yellow",
          type: "scatter",
          data: [[0, 210]],
          marker: {
            fillColor: "yellow",
            lineWidth: 1,
            lineColor: "yellow"
          }
        }
      ]
    }
  }
export default data;

Then in your component:

import data from "./data.js";

export default {
  data () {
    return {
      chartOptions: data.chartOptions,
      chartOptions2: data.chartOptions2,
    }
  }
};

Answer 2

You should specify the key/value pair as follows :

 data() {
    return {
     charts:data
    };
  },

and in the template access the items of the charts array :

<div>
    <highcharts class="hc" :options="charts[0].chartOptions" ref="chart"></highcharts>
    <highcharts class="hc" :options="charts[1].chartOptions2" ref="chart2"></highcharts>
  </div>