Error in v-on handler: "TypeError: Cannot read property 'dispatch' of undefined"

Question

1.mapGetters are working. 2.fetchTiles called in mounted life cycle of hello.vue is working 3.fetchId called in onClick method of click.vue is not working what could be the problem?.

Hello.vue

<script>
import { mapGetters, mapActions } from "vuex";
import { startEditor, addNodeBoard } from "../utilities/utilities";
import Drawflow from "drawflow";
export default {
  name: "HelloWorld",
  data() {
    return {
      editor: null,
    
    };
  },
  props: {
    msg: String,
  },
  computed: mapGetters(["allTiles"]),
  methods: {
    ...mapActions(["fetchTiles"]),
   
  },
  mounted() {
    this.fetchTiles();
  },
};
</script>

click.vue

<template>
  <div class="card-devices" v-on:click="onClick">
    <div class="body" v-html="symbol"></div>
    <span> {{ names }} </span>
    <div class="misc">
      <i class="fas fa-trash"></i>
      <i class="fas fa-pen"></i>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      title: "",
      ids: "",
    };
  },
  props: {
    names: String,
    symbol: String,
    editors: Object,
  },
  methods: {
    ...mapActions(["fetchId"]),
    onClick: function() {
      this.ids = this.editors.node_selected.getAttribute("id");
      this.fetchId(this.ids);
      console.log("clicked");
    },
   
  },
};
</script>
<style scoped>
.fas {
  padding: 0 4px 0 4px;
}
.misc {
  width: 30%;
  display: flex;
  justify-content: flex-end;
}
.card-devices {
  display: flex;
  justify-content: space-evenly;
}
</style>

store is called in main.js

main.js

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

Vue.config.productionTip = false

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

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import tiles from './modules/tiles'
Vue.use(Vuex)

export default new Vuex.Store({
  
  modules: {
    tiles
  }
})

tiles.js

const state = {
  tiles: [...tilesCollections],
  editor: {},
};

const getters = {
  allTiles: (state) => state.tiles,
};

const actions = {
  fetchTiles({ commit }) {
    commit("setTiles", tilesCollections);
  },
  fetchId({ commit }, ids) {
    console.log(ids);
    commit("setEditor", ids);
  },
};
const mutations = {
  setEditor: (state, editor) => (state.editor = editor),
  setTiles: (state, tiles) => (state.tiles = tiles),
};
export default {
  state,
  getters,
  actions,
  mutations,
};

Your question is unclear. Yes or no: Does it work in mounted? Does it work on click? Probably the prop is not ready yet when you try to use it. Do you load the prop async in the parent? — Dan
Let me edit my question. it is not working in onclick. in the case of mounted, it is working. props are ready because I can log it in the console when the component is mounted. — Ananda Padmanabhan
If you are asking whether the onclick function is working, yes I can console.log editor in onclick function — Ananda Padmanabhan
Where are you getting the dispatch error mentioned in the title? I don't see any dispatch in the code — Dan

Mirco Cattabriga Mirco Cattabriga · Accepted Answer · 2021-01-15T07:32:41

The module is called tile but in your import you have used tiles:

 import Vue from 'vue'
    import Vuex from 'vuex'
    import tiles from './modules/tile'
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      
      modules: {
        tiles
      }
    })

FetchId is an action in the tile module so:

...mapActions("tiles", ["fetchId"]),

Error in v-on handler: "TypeError: Cannot read property 'dispatch' of undefined"

1 Answers