This is my parent:
<template>
<Chart :type="bar" :data="[2,15,3,4,5,1,2,4,10,11]"></Chart>
</template>
<script>
import Chart from "./Chart"
export default {
components: {
Chart
},
}
</script>
This is my child component:
<template>
<highcharts :options="chartOptions"></highcharts>
</template>
<script>
import {Chart} from 'highcharts-vue'
export default {
props: ["data", "type"],
components: {
highcharts: Chart
},
data() {
return {
chartOptions: {
chart: {
type: this.type
},
series: [{
data: this.data, // sample data
name: "Test Series",
color: "blue"
}]
}
}
}
}
</script>
I can successfully pass the data using props, but encounter issues with passing the type value. When switching type: this.type to type: "bar", everything functions as expected without any errors in the code itself.
A warning that I receive states:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "bar" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
What mistake am I making?