I'm currently struggling with passing a vuex state to mapOptions in vuejs components.
Here is the code snippet:
<template>
<div>
<highcharts :constructor-type="'mapChart'" :options="mapOptions" class="map"></highcharts>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
created() {
this.$store.dispatch('fetchCountries')
},
computed:{
...mapState(['countries', 'title'])
},
data() {
return {
mapOptions: {
chart: {
map: 'myMapName'
},
title: {
text: this.title
},
credits: {
enabled: false
},
legend: {
title: {
text: 'Number of Confirmed cases'
}
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'top'
}
},colorAxis: {
min: 1,
max: 100000,
type: 'logarithmic'
},
series: [{
type: 'map',
data: this.countries,
joinBy: ['name', 'Country'],
name: 'Country: ',
minSize: 4,
maxSize: '12%',
states: {
hover: {
color: '#a4edba'
}
}
}]
}
};
}
};
I tried writing title: { text: this.title} but it didn't work as expected.
Although I am able to retrieve the title and countries state correctly from the $store, when I pass them to mapOptions, the data won't be passed.
The map gets rendered but without any data or title displayed.
Do you have any suggestions on how to resolve this issue?