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"
Related
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
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 .
I have some components that use this.$route internally, for various things. Some simplified examples would be, using this.$route.name to lookup a i18n string for the page:
<h1>New {{ $t($route.name + '.label') }}</h1>
or watching the $route and loading something:
watch: {
$route: {
handler: 'loadItem',
immediate: true
}
}
Whenever these components appear in vue-styleguidist, I get various errors in the browser console and nothing renders for the component example:
index.js?1ef8:1 [Vue warn]: Error in callback for immediate watcher "$route": "TypeError: Cannot read property 'id' of undefined"
found in
---> <MyComponent> at src/components/MyComponent.vue
<Anonymous>
<Root>
I am deliberately not importing vue-router or my routes objects into the styleguide, because this isn't supported - and it causes lots of problems with redirects, route guards, etc... which aren't relevant to the style guide.
What I really want to do, I think, is to mock this.$route inside the components when they appear in the styleguide - but I can't figure out how to do that.
Another option would be to pass the route information into the components as props. This would properly decouple the components from the router and fix the issue, but it will involve changes to every component and route.
So, I ended up refactoring all my components to pass in the route properties that they were using as properties. This properly decouple the components from the router and fix the issue, but it was a lot of work.
I am using this.props.navigator.push method in react native. That was working fine but now i am getting error "Cannot read property 'navigator' of undefined"
this.props.navigator.push({
screen: "awesome-Projects.DashBoardScreen",
title: "Dash Board"
});
Expected Result: Go to Dash Board
Actual result: remain on same page
This is because your this.props is undefined.Mostly it is caused by that this is directed to another scope.
I have set up Vue so that I have a top level AppLayout component which just includes a Navigation Menu component, the router-view and, which uses v-if to optionally display an ErrorDisplay component if the error data item is set. I set this from an err state variable in the Vuex store.
That is where I want to get to. However, I think the problem is more fundamental.
In a lower component, I have a submit function that gets called when I click the submit button. To test error handling I have put
throw new Error('Cannot Submit');
In my Main.js I have
handlers for window.orerror, window.addEventListner, Vue.config.errorhandler, Vue.config.warnhandler
All of these should just call the errHandler function, which just calls an action to update the err variable in the state. The hope being that this will then result in the ErrorDisplay component showing on my top level component.
However, I have console.log statements as the first statement in all the above handlers and in my errHandler function. None of these console.logs are getting executed.
In the Console in Chrome, I am just seeing
[vue warn]: Error in v-on handler: "Error: Cannot Submit"
So it is getting the text from my throw, but none of the error handlers seem to be capturing this?
Vue provides Global configuration config.errorHandler to capture error inside Vue components Globally.
As per Official Docs
Assign a handler for uncaught errors during component to render function and watchers. The handler gets called with the error and the Vue instance.
This is how it can be used:
Vue.config.errorHandler = function (err, vm, info) {
// handle error
// `info` is a Vue-specific error info, e.g. which lifecycle hook
// the error was found in. Only available in 2.2.0+
}
Official docs
Hope this helps!
Did more research and I think someone may have already raised a bug report with Vue for this
PR on Vue
https://github.com/vuejs/vue/pull/5709
So it looks like the problem is that the way that I am trying to test this isn't being caught.