Передача данных из внешнего js файла в vue компонент

Question

Я пытаюсь передать данные из внешнего data.js файла в компонент, чтобы его можно было использовать в нем. Однако я получаю сообщение об ошибке, что данные не определены.

Вот мои данные. 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;

А вот компонент, где мне нужно использовать данные:

<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>

Вы также можете попробовать это на коды и флажки

Answer 1

Преобразование ваших данных. js в объект (теперь это массив):

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;

Затем в вашем компоненте:

import data from "./data.js";

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

Answer 2

Вы должны указать пару ключ / значение следующим образом:

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

и в шаблоне получить доступ к элементам массива charts:

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