[Vuejs]-Highmaps in VueJs….pass a State to mapOptions

by

1👍

✅

The data property is initialized before the computed one, so to fix this try to make the mapOptions as a computed property :


computed:{
...mapState(['countries', 'title']),
 mapOptions(){ 

  return {
                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'
                        }
                    }
                }]
            }}

}
👤Boussadjra Brahim

0👍

Vuex state is asynchronous. You are setting the data even before you receive a value. You have to set the text value only after you receive the updated data.

async created() {
    this.$store.dispatch('fetchCountries')
    const title = await this.title
    this.mapOptions.title.text = title
}

Full code

<template>
    <div>
        <highcharts :constructor-type="'mapChart'" :options="mapOptions" class="map"></highcharts>
    </div>
</template>
<script>
import { mapState } from 'vuex'
 export default {
   async created() {
        this.$store.dispatch('fetchCountries')
        const title = await this.title
        this.mapOptions.title.text = title
    },
    computed:{
        ...mapState(['countries', 'title'])
    },
    data() {
        return {
            mapOptions: {
                chart: {
                    map: 'myMapName'
                },
                title: {
                    text: ''
                },
                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'
                        }
                    }
                }]
            }
        };
    }
};
👤SpiritOfDragon

Leave a comment