cannot read property 'data' undefined - vue.js

I am trying to get ag-grid row data for editing in a modal window.
during render vue throughs the bellow error.
[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'data' of undefined"
my code. This is the mounted method.
mounted() {
this.leadsData = JSON.parse(JSON.stringify(this.params.data))
},

this.params must be a variable present in the data function,
otherwise, if you look for a property in the url you can use
this.$route.params.data or this.$route.query.data

Related

Vue router return an error in mounted hook

I have an error with Vue-Router, when click to the route-link component wasn't loaded.
[Vue warn]: Error in mounted hook (Promise/async): "TypeError: Cannot read properties of >undefined (reading 'id')"
found in
at assets/organisms/manage/ManageWorkFlowOverview.vue
Do you have an idea of the origin of the problem ?
Thanks in advance.
Best regards,
Jérémy

Error in mounted hook (Promise/async): "TypeError: Cannot read property 'scrollIntoView' of undefined" in mounted hook (Vue)

ScrollIntoView returns undefined
I am trying to scroll into the element when navigate to that page:
scrollTo(itemId) {
this.$refs['item' + itemId].scrollIntoView({
behavior: 'smooth',
block: 'center',
inline: 'nearest',
})
},
The point is that it's getting called inside the mounted hook. ref is defined itemId is also defined which is a query parameter from vue router but it still throws
error in a mounted hook (Promise/async): "TypeError: Cannot read property 'scrollIntoView' of undefined"
What is wrong and how can be it fixed?
It seems that dynamic refs are not ready in mounted hook, so try to watch the $route object and scroll to the desired element :
watch:{
$route:{
handler(to,from){
if(to.query.itemId){
this.scrollTo(to.query.itemId)
},
deep:true //because $route is an object
}
}
}
But I think that you should use something like scroll-behavior

Life cycle Hook in vueJs

I am using Firebase auth for user authentication, and Firestore for database, but I am not able to sync between user and its campaigns.
campaigns: firestoreAction(({ bindFirestoreRef, getters }) => {
return bindFirestoreRef(
'campaigns',
firebase.firestore().collection(`user_profile`).doc(getters.user.data.id).collection("campaigns"))
}),
and getting this error:
vue.esm.js?a026:628 [Vue warn]: Error in created hook: "TypeError: Cannot read property 'id' of null"
Any suggestions?
TypeError means your are accessing a property of an object that is null.
May be your getters.user.data is null and you are trying to access id on null.
Please print your getters.user.data in browser console.
it is just like you are not able to get values in your getters, try to mutate the user object in vuex properly and then set the object in getters, may be you are not getting proper response or if getting then may be could not be able to get in this component .

Get rid of [Vue warn] in production mode error of mutating v-model

I have set Vue.config.productionTip = false as its default to false. But when changing a v-model I receive the following error:
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "name" found in the [path-to-the-.vue-file]
I have also checked the vue config file:
Ebrahims-MacBook-Pro:~ ebrahim$ vue config
Resolved path: /Users/ebrahim/.vuerc
{
"useTaobaoRegistry": false
}
It has only useTaobaoRegistry option.
Even typing a character throws errors [Vue warn], how can I get rid of it?

Vue.js render error with Firestore and vuefire

I have a problem in my Vue.js application
Indeed, my component is working properly, however I have errors in the console because it seems to me that the component is rendered several times during its life cycle, and the first time, when it is rendered, it does not find not my races variable at the time of the display because the method db.collection ('courses') has not yet run. How to do?
thank you
My code on JsFiddle:
firestore() { }
https://jsfiddle.net/gf9qhsjr/1/
The Error :
vue.esm.js?efeb:591 [Vue warn]: Error in render: "TypeError: Cannot
read property 'title' of undefined"