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

Fab · Accepted Answer · 2020-01-30 09:49:19Z

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,
    }
  }
};

Boussadjra Brahim · Accepted Answer · 2020-01-30 10:07:15Z

0

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>

answered Jan 30, 2020 at 10:07

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Collectives™ on Stack Overflow

Passing data from external js file to vue component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related