Search query - form

I was wondering how to convert url string back to the form?

Maybe doing this wrong, but i have a form with a few select / radio / checkbox and when they are changes / selected they get added to the $route.query and fire of an axios request and live filter a records from the API.

All working fine up to the point i get my filtered list and click on a link (same site) and navigate to that page, problem is i click back and the url still contains the query as expected but the form is empty.

I tried to reverse it back to the original as was entered in the form

this.form = qs.parse($route.query)

I can single values back to the form but if i passed an array of id’s (numbers) they come back as a string so the form does not recognize the value

So the form values look like this:

{ "page": 1, "online": true, "regions": [ 107, 106, 105 ] }

$route.query looks like this:

{ "page": "1", "online": "true", "regions": [ "107", "106", "105" ] }

And the browser query looks like:

?page=1&online=true&regions=107&regions=106&regions=105

This is the API method:

async search(url) {
  try {
    const payload = {
      url,
      method: 'get',
      params: {
        ...this.form,
        page: this.currentPage
      },
      paramsSerializer: params => {
        return qs.stringify(params)
      }
    }

    const response = await this.$axios.$request(payload)

    this.handleResponse(response)

  } catch (error) {
    console.log(error)
  }
},

Anyone know spot how i can get this accomplished based on current approach or where i went wrong?

I could simply save the state of the form in Vuex and upon return fill it as last saved state but if the values are right there in the URL it seems over kill to do that…

You’re on the right track (you need to parse the string), but you’ll need to come up with a bit of logic to do so. Have a look at this thread: https://github.com/ljharb/qs/issues/91

Thanks, I will dig into it but trying all of the “solutions” from your link are just returning Object:object so i will keep trying.

For now i will simply toss into Vuex, and problem solved :slight_smile: