Here's the code snippet from my component:
//template
<v-select ref='ItemSearchSelect' :options="options"></v-select>
...
//script
created: function () {
this.$store.subscribe((setFocusSearch, state) => {
if (setFocusSearch.type == 'setFocusSearch' && setFocusSearch.payload == true){
this.$refs.ItemSearchSelect.$refs.search.focus()
this.$store.commit('setFocusSearch',false)
}
})
},
This is the mutation function in my store that can be accessed from any other component:
setFocusSearch(state,val){
state.focussearch = val;
},
Sometimes it's working perfectly, but at times I encounter an error in the console and the focus feature fails to work:
Uncaught TypeError: Cannot read property '$refs' of undefined
at eval (ItemSearch.vue?d78c:38)
at eval (vuex.esm.js?2f62:392)
at Array.forEach (<anonymous>)
at Store.commit (vuex.esm.js?2f62:392)
at Store.boundCommit [as commit] (vuex.esm.js?2f62:335)
at VueComponent.focusSearch (ShoppingCart.vue?0f5b:96)
at keydown (eval at ./node_modules/cache-loader/dist/cjs.js?
...
This issue consistently arises under a specific scenario:
I navigate to a view with my ItemSearch component and another component that triggers the store mutation. Everything works fine at this point. Then, I switch to a different view unrelated to the components and return to the original view using router push. The error occurs when the mutation is triggered again.
Any insights on what might be causing this?