CODEWITHSUNDEEP
javascriptvuejs2vue-router
Touha
Touha

Reputation: 617

vue.js: can't access to router parameters from computed property

I'm trying to pass a string parameter using the link. but it seems that computed or methods property cannot return the parameter value. The whole component stops rendering when I use computed property.

If I directly put {{ $route.params.**** }} on the template, everything works fine. But that's not the way I want.

<template>
  <div class="container my-5 py-5">
    <div class="row">{{ category }}</div>

    <!-- <div class="row">{{ $route.params.category }}</div> -->
  </div>
</template>
<script>
export default {
  name: "shops",
  data() {
    return {};
  },
  computed: {
    category: () => {
      return this.$route.params.category;
    }
  }
};
</script>

from router.js file:

   {
      path: "/:category",
      name: "category",
      props: true,
      component: () => import("./views/Shops.vue")
    },

I did't get any error message in the console.

Upvotes: 9

Views: 11447

Answers (2)

Satyam Pathak
Satyam Pathak

Reputation: 6912

You are facing this error because an arrow function wouldn't bind this to the vue instance for which you are defining the computed property. The same would happen if you were to define methods using an arrow function.

Don't use arrow functions to define methods/computed properties, this will not work.

Just replace

        category: () => {
            return this.$route.params.category;
        }

With:

        category() {
            return this.$route.params.category;
        }

Refer - https://v2.vuejs.org/v2/guide/instance.html#Data-and-Methods

Upvotes: 11

RoberMP
RoberMP

Reputation: 1356

Try with

category(){
  return this.$route.params.category;
}

or

category: function() {
  return this.$route.params.category;
}

this is not the same in arrow functions than in plain functions: https://medium.freecodecamp.org/when-and-why-you-should-use-es6-arrow-functions-and-when-you-shouldnt-3d851d7f0b26

Upvotes: 4

Related Questions