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
Related
I have two components.
The first one:
This component has this one:
this.$router.push({path: '/dte', params: { id: 1 }});
I am sending and redirecting to /dte
And I have a second one which it has in the created part of the vuejs code this:
export default {
created() {
alert(this.$router.params.id);
}
}
I wonder:
How can I check if id is defined?
I wonder why does it display this error - Error in created hook: "TypeError: Cannot read property 'id' of undefined"?
Thanks
Be careful, there are two globals objects injected by vue-router:
$router: The vue-router instance
$route: The current route state described in an object
Here, you have to check for this.$route.params.id to get the current route parameter.
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
When i try redirect to other router in watcher, console gives me this error:
Can somebody help me and tell why is this happening?
Thanks!
watch: {
lifes : function() {
console.log('lifes watcher work')
if(this.lifes === 0) {
this.$route.router.go('/ending');
}
}
},
I find other ways like this.router.go('/ending') or just router.go('/ending') but also doesn't work.
ERROR:
[Vue warn]: Error in callback for watcher "lifes": "TypeError: Cannot read property 'go' of undefined"
I would like to use JS Hook as described here. Specially, I want to use the afterEnter hook with an async component.
This is my async component:
Vue.component('example', function(resolve, reject){
let data = {
text: 'test data',
};
$.post('http://example.com', data, function(r){
r = JSON.parse(r);
if( r.success ) {
resolve({
template: r.data,
afterEnter: function(el, done){
console.log('test');
}
});
}
});
});
This is what the ajax call gets from the server, and it's what is passed to the template in r.data.
<transition v-on:after-enter="afterEnter"></transition>
These are the two errors that I get.
[Vue warn]: Property or method "afterEnter" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
[Vue warn]: Invalid handler for event "after-enter": got undefined
Is it possible to use JS hooks with async components? And if not, how should I approach this? My objective is to run custom JS after Vue (and/or vue-router) inject the component template onto the page, so that I can initiliaze image sliders and whatnot. It is important that my custom JS fires every time the component is navigated to, and not only on the first load.
Thank you.
That warning means that Vue is looking for (but unable to find) a property or method named "afterEnter", which you reference in your template. You have defined afterEnter in your resolve function as if it is a lifecycle hook, but it needs to be one of your Vue instance's methods.
So, your resolve function should look like this:
resolve({
template: r.data,
methods: {
afterEnter: function(el, done) {
console.log('test');
}
}
});