Question

我正在尝试将数据从外部data.js文件传递到组件，以便可以在其中使用它。但是我收到错误的数据没有定义。

这是我的data.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;

这是我需要使用数据的组件：

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

您也可以在codesandbox

上尝试

Answer 1

将data.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>

将数据从外部js文件传递到vue组件

2 个答案: