Cannot read property 'dispatch' of undefined VueJS

Question

I have a problem when I call action for mutation in method drawMap(). So, I registered my store component in main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

And below my component where I call to action inside another method DRAWMAP, but I get the error

'Cannot read property 'dispatch' of undefined VueJS '

. What do I wrong?

   <script>
window.jQuery = require('jquery');
var $ = window.jQuery;
require('jvectormap');
require('../lib/jquery.vmap');
require('../lib/jquery.vmap.ukraine');
import {mapGetters} from 'vuex';

export default {
    data() {
        return {
            currentRegion: 'Львівська область',
            counter: 0
        }
    },
    mounted() {
        this.drawMap();
        this.$store.dispatch('SET_REGION', this.currentRegion);
    },
    computed: {
        ...mapGetters(['CHOOSED_REGION']),
    },  
    methods: {
        drawMap(){
            $('#vmap').vectorMap({
                map: 'ukraine_ua',
                onRegionClick: function(element, code, region)
                {
                    this.currentRegion = region;
                    this.$store.dispatch('SET_REGION', this.currentRegion);
                }
            });
        },
    }
}
</script>

Please add your code as text and not an image.

zero298
– zero298

2019-12-09 20:51:48 +00:00
Commented Dec 9, 2019 at 20:51 — zero298
– zero298, Commented Dec 9, 2019 at 20:51
@zero298, changed

Stas Zgurskiy
– Stas Zgurskiy

2019-12-09 20:57:45 +00:00
Commented Dec 9, 2019 at 20:57 — Stas Zgurskiy
– Stas Zgurskiy, Commented Dec 9, 2019 at 20:57

Gloria Morales Londoño · Accepted Answer · 2019-12-09 21:04:25Z

1

Try changing onRegionClick to use arrow function so that this.$store.dispatch makes reference to the top-level object.

onRegionClick: (element, code, region) => {
  this.currentRegion = region;
  this.$store.dispatch('SET_REGION', this.currentRegion);
}

answered Dec 9, 2019 at 21:04

Gloria Morales Londoño

1061 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stas Zgurskiy Over a year ago

Thanks very much, you are genius @Gloria Morales Londoño!

Collectives™ on Stack Overflow

Cannot read property 'dispatch' of undefined VueJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related