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 Levý, Jan 19 '21 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 Levý, Jan 19 '21 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, Jan 20 '21 at 07:58

score 0 · Answer 1 · answered Jan 19 '21 at 16:39

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 '21 at 16:39

Amaarockz

4,348
2
9
27

But it won't fix the problem. I need to actually push the query to the route. – ahb360 Jan 19 '21 at 17:35
Yes you cant passed the object in that way I guess – Amaarockz Jan 19 '21 at 17:45
Check these links https://router.vuejs.org/guide/essentials/navigation.html – Amaarockz Jan 19 '21 at 17:46
https://stackoverflow.com/questions/40382388/how-to-set-url-query-params-in-vue-with-vue-router – Amaarockz Jan 19 '21 at 17:47

score 0 · Answer 2 · answered Jan 20 '21 at 08:49

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 '21 at 08:49

ahb360

373
1
3
10

@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. – ahb360 Jan 20 '21 at 09:36

use form model in vue router push

2 Answers2