从外部data.js向Vue组件传数据时遇'data未定义'错误

我来帮你梳理下问题所在，以及怎么修复：

问题根源 #

你导入的data是一个包含两个对象的数组，但在组件的data()选项里，你只是把这个数组直接返回成了组件数据的一个属性（也叫data）。模板里直接用chartOptions和chartOptions2时，Vue会在组件的根数据对象里找这两个属性，但它们并不存在——这两个属性其实是在你导入的数组的第0和第1个元素里。

修复方案 #

我们只需要把导入的数组里的属性解构出来，或者正确访问数组元素的属性，就能在模板里正常使用了。这里推荐用解构的方式，代码更清晰：

修改后的Vue组件代码

<template>
  <div>
    <highcharts class="hc" :options="chartOptions" ref="chart"></highcharts>
    <highcharts class="hc" :options="chartOptions2" ref="chart"></highcharts>
  </div>
</template>
<script>
// 重命名导入的变量，避免和Vue的data选项混淆
import chartData from "./data.js";
export default {
  data () {
    // 解构数组里的两个对象
    const [firstChart, secondChart] = chartData;
    return {
      // 把需要的选项提取出来作为组件的根数据属性
      chartOptions: firstChart.chartOptions,
      chartOptions2: secondChart.chartOptions2
    }
  }
};
</script>

另一种简洁写法（如果不需要保留原数组） #

如果你不需要在组件里保留整个导入的数组，也可以直接在返回时取值：

data () {
  return {
    chartOptions: chartData[0].chartOptions,
    chartOptions2: chartData[1].chartOptions2
  }
}

这样修改后，模板里的chartOptions和chartOptions2就能正确找到对应的数据，不会再出现未定义的错误了。

内容的提问来源于stack exchange，提问作者Alex T