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 .
Related
I get a very strange error which I can't locate.
[Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] do not mutate vuex store state outside mutation handlers."
I am using vuex in strict mode. Despite the error I am not mutating any vuex store state outside mutation handlers. The component is not using vuex at all. I created a test component that does not use anything like below.
<template>
<div>
TEST COMPONENT
</div>
</template>
<script>
export default {
name: 'testComponent',
props: ['testProp'],
}
</script>
As soon I add the props part I get the error. I am not able to represent the whole project here or reproduce it. But there is nothing special anyway.
For me it was because I did routes = this.$router.options.routes for setting up Navigation.
The solution was routes = JSON.parse(JSON.stringify(routes)) before assigning routes to state.
Well after some debugging I found out that it actually was caused by vuex and vue-router.
Actually I could find this before if I just looked detailed into the trace of the error. The vue-router.esm.js?8c4f:2279 section was giving a hint but I could not see it (lack of vue experience I guess).
...
reactiveSetter # vue.runtime.esm.js?2b0e:1055
normalizeProps # vue.runtime.esm.js?2b0e:1449
mergeOptions # vue.runtime.esm.js?2b0e:1521
Vue.extend # vue.runtime.esm.js?2b0e:5159
extractGuard # vue-router.esm.js?8c4f:2279
eval # vue-router.esm.js?8c4f:2263
eval # vue-router.esm.js?8c4f:1968
eval # vue-router.esm.js?8c4f:1968
...
I was getting the the routes from the store and adding (addRoutes()) them to the route.
router.beforeEach((to, from, next) => {
...
router.addRoutes([store.getters['route/getRoute']]);
...
}
But because it was passed by reference (and I guess the router was doing some changes on it) the error was rising. The route was trying to "mutate vuex store outside mutation hander"
[Vue warn]: Error in callback for watcher "function () { return
this._data.$$state }": "Error: [vuex] do not mutate vuex store state outside
mutation handlers."
I solved it by deep cloning (like below) it with lodash but could use other deepcloning as well.
let routeDeepClone = _.cloneDeep([store.getters['route/getRoute']]);
router.addRoutes(routeDeepClone);
Now it works very well. Hope it helps someone.
I was dumbfounded by this for a little while, but turns out it was something super silly. As the error suggests, we are modifying a Vuex state somewhere inadvertently. Possibly, you are doing an assignment without realizing it. My error was this:
computed: {
foo() {
return this.model.bar.find(
(obj) => obj.key = this.$route.params.baz
)
},
}
Silly me, I was doing
obj.key = this.$route.params.baz
instead of
obj.key === this.$route.params.baz
The object was getting updated by reference instead of my intention of doing an equality check.
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 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.
I started working with Vuex 2 weeks ago and I realized that Vuex is very good to handle the state of the app. But, it is difficult to handle the error of API calls. When I get data from the server, I dispatch an action. When data is successfully returned, of course, everything is fine. But when an error happens, I change state, I don't know how to detect it through the state from Vuejs components to notify to the user. Could anyone give me some advice?
I typically have the following parts:
A component for displaying the notification, typically an alert or a snackbar or similar, e.g. error-notification. I use this component on a high level, directly below the root app component. This depends on your layout.
A property in vuex indicating the error state, typically an error object w/ error code & message, e.g. error
One mutation in the store for raising an error setting the error property, e.g. raiseError
One mutation in the store for dismissing an error clearing the error property, e.g. dismissError
Using these, you need to:
Display error-notification based on the error in the store: <error-notification v-if="$store.state.error :error="$store.state.error"/>
When an error occurs, call raiseError mutation (in your API callback): vm.$store.commit('raiseError', { code: 'ERR_FOO', msg: 'A foo error ocurred'})
In error-notification, call the dismissError mutation when the notification is closed.
You can also return a promise in your action so that if you call it from component you can catch the error there and display a notification as needed:
in your store:
//action
const fetch = (context) => {
return api.fetchTodos() //api here returns a promise. You can also do new Promise(...)
.then((response) => {
context.commit('SET_TODOS', response);
})
};
in vue component:
this.$store.dispatch('todos/fetch', modifiedTodo)
.catch(error => {
//show notification
})
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"