[英]Passing data from external js file to vue component
我試圖將數據從外部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>
你也可以在codeandbox上試試這個
將您的 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,
}
}
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.