[Vuejs]-Nuxt handle redirect after deletion without errors : beforeUpdate direction not working?

0👍

As you hinted, using a timeout is not a good practice since you don’t know how long it will take for the page to be destroyed, and thus you don’t know which event will be executed first by the javascript event loop.

A good practice would be to dynamically register a ‘destroyed’ hook to your page, like so:

methods: {
    deletePage() {
        this.$once('hook:destroyed', serverCall)
        redirect()
    },
},

Note: you can also use the ‘beforeDestroy’ hook and it should work equally fine.

0👍

This is the sequence of events occurring:

  1. serverCall() dispatches an update, modifying $store.state.pages.
  2. content (which depends on $store.state.pages) recomputes, but $route.params.id is equal to the ID of the page just deleted, so Array.prototype.find() returns undefined.
  3. subcontent (which depends on content) recomputes, and dereferences the undefined.

One solution is to check for the undefined before dereferencing:

export default {
  computed: {
    content() {...},
    subcontent() {
      return this.content?.subcontent
                         👆

      // OR
      return this.content && this.content.subcontent
    }
  }
}

demo

Leave a comment