use form model in vue router push

Question

I am writing a component to filter data in a grid. The component has multiple fields in which I store their data in the model. when a user fills in some input and submits the form I am doing this on submit.

methods: {
    async submit() {
      await this.$router.push(
        {
          name: this.$route.name,
          query: JSON.parse(JSON.stringify(this.model))
        }
      )
    }
  }

I expect this to push the form data in the URL query but it won't do anything and I get this error.

Avoided redundant navigation to current location

It looks like I can't pass a dynamic value to the query. If I log the model in the console and paste the exact data in the code for the query it works without any problem!! Is there a way to fix this problem?

Why are you trying to switch to the same route you already are on? — Michal Šindelář
– Michal Šindelář, Commented Jan 19, 2021 at 16:39
Well I see but how is this useful? What do you use that query for? You should really expand your question with more info about what are you trying to achieve.... — Michal Šindelář
– Michal Šindelář, Commented Jan 19, 2021 at 18:51
@MichalLevý there is a component responsible to generate filtering forms for different grids so it has dynamic fields. I have the data of that form in the model. I must push the data in the query so the grid refreshes and show the filtered data. — ahb360
– ahb360, Commented Jan 20, 2021 at 7:58

Amaarockz · Accepted Answer · 2021-01-19 16:39:30Z

0

Try using catch block..

this.$router.push(
        {
          name: this.$route.name,
          query: JSON.parse(JSON.stringify(this.model))
        }).catch(()=>{});

In this way, it allows you to only avoid the error displaying, because browser thinks the exception was handled.

answered Jan 19, 2021 at 16:39

Amaarockz

4,6642 gold badges12 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ahb360 Over a year ago

But it won't fix the problem. I need to actually push the query to the route.

Amaarockz Over a year ago

Yes you cant passed the object in that way I guess

Amaarockz Over a year ago

Check these links router.vuejs.org/guide/essentials/navigation.html

Amaarockz Over a year ago

stackoverflow.com/questions/40382388/…

ahb360 · Accepted Answer · 2021-01-20 08:49:10Z

0

I fixed it. I don't know how but I used to sync the form to the this.$route.query. So, when I was filling the form the query was getting updated. Obviously, when I was trying to push the query, the Vue router thought the query is redundant and raised that error.

answered Jan 20, 2021 at 8:49

ahb360

3931 gold badge3 silver badges12 bronze badges

1 Comment

ahb360 Over a year ago

@AdamOrlov I don't actually know how I did it but I passed this.$route.query as a param to the component with the name resourceParams. In the data of my component I had a line like this model: this.resourceParams I just changed it to model: { ...this.resourceParams } and this fixed the issue.

Collectives™ on Stack Overflow

use form model in vue router push

2 Answers 2

4 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Linked

Related