computed property doesn't work with route param

Question

I have a getter where all products are stored there, and when I want to get only one product dynamically depending on this.$route.params.id it doesn't return any value

this code works correctly when I navigate to a certain product, but when I refresh the page I lose everything

computed: {
        ...mapGetters(["getAllProducts"]),
        product() {
            return this.getAllProducts.filter(item => {
                return  item.id === this.$route.params.id;
            });
        }
    }

But if I supplied filter() with static value in instead of this.$route.params.id like below it works

        product() {
            return this.getAllProducts.filter(item => {
                return  item.id === 1;
            });
        }

I really don't know what is the problem, despite of in another component in my project I did some filters on some computed properties and it worked

update: the routes config

{
    path: "/product/:id",
    name: "product-page",
    component: ProductPage,
    props: true
}

what is the result of console.log(this.$route.params.id;) inside product() method? — wangdev87, Nov 17 '20 at 10:45
it depends on the product i navigated to. It returns number as expected. — MR Loll, Nov 17 '20 at 10:47
can you add const _self = this at the first of the product() method, and call _self.$route.params.id inside filter method()? — wangdev87, Nov 17 '20 at 10:49
Hi, why did you deleted your question here? https://stackoverflow.com/questions/74844557/npm-init-nuxt-app-results-a-problem-failed-to-load-plugin-unicorn-declared-in?noredirect=1#comment132156710_74844557 — kissu, Dec 22 '22 at 09:52

Towkir · Accepted Answer · 2021-03-19T17:18:48.727

3

Route params are usually parsed as strings. Try converting the route param value to number type and then do the match:

product() {
    return this.getAllProducts
      .filter(item => item.id === Number(this.$route.params.id));
}

edited Mar 19 '21 at 17:18

answered Nov 17 '20 at 11:04

Towkir

3,889
2
22
41

You shouldn't *parse* the number. You should only convert its type. In other words, you should use `Number(x)` rather than `parseInt(x, 10)`. Also note `+x` is equivalent to using `Number(x)` - they basically use the same code, under the hood. – tao Mar 17 '21 at 20:41

Boussadjra Brahim · Answer 2 · 2020-11-17T11:10:51.033

1

According to the official docs :

When props is set to true, the route.params will be set as the component props

so add the id to your props like then use it instead of this.$route.params.id :

props:['id'], //refers to this.$route.params.id
...
computed: {
        ...mapGetters(["getAllProducts"]),
        product() {
            return this.getAllProducts.filter(item => {
                return  item.id == this.id;
            });
        }
    }

edited Nov 17 '20 at 11:10

answered Nov 17 '20 at 11:00

Boussadjra Brahim

82,684
19
144
164

that's right, the component accepts the id as a prod, but still the code doesn't work – MR Loll Nov 17 '20 at 11:06
did you try it out without `props:true` and `this.$route.params.id` – Boussadjra Brahim Nov 17 '20 at 11:10
1

Try out `return item.id == this.id;` instead of `return item.id === this.id;` remove one `=` to disable strict comparison – Boussadjra Brahim Nov 17 '20 at 11:11

score 0 · Answer 3 · answered Nov 17 '20 at 10:55

Try giving this.$route.params.id as a computed propertly. Then call it in the filter method.

computed: {
    ...mapGetters(["getAllProducts"]),
    routerId() {
     return this.$route.params.id;
    },
    product() {
        return this.getAllProducts.filter(item => {
            return  item.id === this.routerId;
        });
    }
}

computed property doesn't work with route param

3 Answers3