I am pushing route parameter/query changes from a component, and I want to watch changes from another component. I was handling the issue by using below syntax on vue
watch: {
"$route.params.index": function (val) {
console.log(val)
}
}
What is the corresponding syntax in nuxt ?
Thanks in advance.
Related
I need to emit some events before leaving a particular page. So I'm thinking of using the beforeDestroy hook to do this. But it seems not triggering the method.
// pages/view.vue
beforeDestroy() {
this.$alertEvent('finished')
}
I'm also using the keep-alive directive on the <nuxt>
How can I trigger this method effectively?
for Nuxt 3 you can use onBeforeUnmount
onBeforeUnmount(() => {
alert('the component is destroyed')
})
https://vuejs.org/api/composition-api-lifecycle.html#onbeforeunmount
i think this should work .
maybe you have problem with this.$alertEvent('finished') so you cannot see the result
beforeDestroy() {
alert('the component is destroy')
},
If your component wrapped inside - this is what Nuxt keep-alive directive does, then your component will not be destroyed.
You should use deactivated hook.
https://v2.vuejs.org/v2/api/#deactivated
I'm working on a component which enables the user to undo the deletion of an item. However, the item should be deleted when the user navigates to another route. To achieve this I'm watching the route like so:
`watch: {
$route(to, from) {
if (this.showUndo === true) {
console.log('item will be deleted');
this.confirmDelete();
}
},
},
`
Unfortunately, this gets only triggered when I enter this specific route and not on exiting it. An explanation why that is or an alternative to my watch: - method would be much appreciated!
Basically I'm looking for an alternative to beforeRouteLeave since this is a sub-component and therefore I can't use Navigation Guards. Thanks!
Vue lifecycle hook- BeforeDestroy is fired right before teardown. Your component will still be fully present and functional. If you need to cleanup events or reactive subscriptions,
beforeDestroy would probably be the time to do it.
<script>
export default {
beforeDestroy() {
//Try like this
this.confirmDelete();
console.log('item will be deleted');
}
}
</script>
Ref - https://v2.vuejs.org/v2/api/#beforeDestroy
Currently in order for me to do a thing X either when loading route A or arriving to route A, I need to write X twice:
watch: {
$route (to, from){
if (to.name === 'simulation-step-3-sequence') {
EventBus.$emit('actionIsSortable');
}
}
},
async mounted () {
if (this.$route.name === 'simulation-step-3-sequence') {
EventBus.$emit('actionIsSortable');
}
}
Is there a way to simplify this so I write X (the emit line) only once?
This technique is really needed only in two cases - multiple routes are using same component or dynamic routes (with parameters) ...see the docs
In this cases when the new route is using same component as the old route, Vue Router will just reuse existing component instance.
You can place a key on router-view and disable this behavior. Your site will be less effective but you can get rid of $route watcher
<router-view :key="$route.fullPath" />
Other option is to change watcher definition like this:
watch: {
$route: {
immediate: true,
handler: function(to, from) {
console.log(`Route changing from '${from}' to '${to}'`);
}
}
}
Vue will call watcher handler on route changes but also when the component is created (so you can remove the code in lifecycle hook)
I was sure that the lifecycle hooks in Vue were 8 (beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed) but today I found out(https://v2.vuejs.org/v2/api/#activated) that there are 3 more:
• activated
• deactivated
• error captured
Somebody can explain how these 3 work? Is possible to test them with a console.log? (Just to understand when they are called)
First, a little context:
In Vue 2.0+, there is a built-in component called <keep-alive> that takes the child element inside it and keeps it alive in memory as a cached component. Normally, Vue would reuse a component if its props change, but maybe the component is very complex and is slow to update. You could wrap it with <keep-alive> and the component would be cached for the props provided to it.
When a component inside a <keep-alive> is updated, the activated life-cycle hook is called. When that component is cached and set aside, the deactivated life-cycle hook is called.
The errorCaptured life-cycle hook was added in Vue 2.5.0 and is called whenever an error is captured by a descendent component. So, if you have a component called A that has a child component called B, and that has a child component called C, then if C captures and error, the errorCaptured life-cycle hook will be called on both A and B.
These hooks all work the same as any other hook, so use them the same way.
export default {
data() {
return {}
},
mounted() {
console.log('mounted hook called')
},
errorCaptured(err, vm, info) {
console.log('error captured in component', vm)
console.error(err)
console.log('error info:', info)
},
activated() {
console.log('cached component is being used again')
},
deactivated() {
console.log('component is being kept alive in cache for now')
}
}
https://v2.vuejs.org/v2/api/#activated
https://v2.vuejs.org/v2/api/#deactivated
https://v2.vuejs.org/v2/api/#errorCaptured
I know it's already late for this answer but someone might also looking answer for
the problem. Vue.js disable's console.log function by default, so we have to enable it.
Just put "rules": { "no-console": "off",} on package.json
Cheers
I'm creating a SPA where after each HTTP response, the app goes to the same component with the same route, but the props passed to the component will be different based on the response. I understand the reuse feature in Vue and it won't reload. But I need the newly returned data every time I trigger the router to go to the component. My app.vue:
upload(formData).then(x => {
router.push({
name: 'Chart',
params: {
chartData: x
}
});
});
Then the target Chart.vue:
props: ['chartData'],
data: function() {
// do some processing using props
return {...}
}
My problem is that since for my router, the route doesn't change, hence other approaches like using :key=$route.fullPath or the beforeRouteUpdate don't work. Then how can I make the Chart component recompute the data? I've checked thru computed() and watch as well but it's not working.