CODEWITHSUNDEEP
javascriptvue.js
ste
ste

Reputation: 3269

vue-router beforeRouteUpdate hook can't access `this`

I'm building a Vue.js application using vue-router.

From the doc I can read that inside the hook beforeRouteUpdate I have full access to the component through the keyword this:

Note that beforeRouteEnter is the only guard that supports passing a callback to next. For beforeRouteUpdate and beforeRouteLeave, this is already available, so passing a callback is unnecessary and therefore not supported:

So I wrote the following code:

    ...
    methods: {
      ...mapActions({
        setFileDetails: 'setFileDetails',
        setActionParams: 'setActionParams',
        setSelectedFileId: 'setSelectedFileId',
      }),
      goToImportSource() {
        this.$router.push('/import');
      },
      openAnnotationsView(item) {
        this.$router.push(`/ingestion/queue/${item.id}`);
      },
    },
    beforeRouteUpdate: (
      to,
      from,
      next,
    ) => {
      this.setSelectedFileId(to.params.id);
      next();
    },
  };
</script>

But I get this error:

vue-router.esm.js?fe87:16 [vue-router] uncaught error during route navigation:

TypeError: _this.setSelectedFileId is not a function
    at VueComponent.beforeRouteUpdate (PageIngestionQueue.vue?3869:67)
    at boundRouteGuard (vue-router.esm.js?fe87:2080)
    at iterator (vue-router.esm.js?fe87:1943)
    at step (vue-router.esm.js?fe87:1717)
    at step (vue-router.esm.js?fe87:1721)
    at step (vue-router.esm.js?fe87:1721)
    at step (vue-router.esm.js?fe87:1721)
    at eval (vue-router.esm.js?fe87:1718)
    at eval (vue-router.esm.js?fe87:1964)
    at eval (routeRules.js?b464:9)

If I call this.setSelectedFileId anywhere else in the component it works...what am I missing?

Upvotes: 2

Views: 3376

Answers (1)

Decade Moon
Decade Moon

Reputation: 34306

Use function() {} instead of () => {} syntax (the latter will bind this which you don't want here):

beforeRouteUpdate(to, from, next) {
  this.setSelectedFileId(to.params.id);
  next();
}

or

beforeRouteUpdate: function(to, from, next) {
  this.setSelectedFileId(to.params.id);
  next();
}

Upvotes: 5

Related Questions