Recently, I encountered an issue with vue-router-query. When using a click event to navigate to the filter page and append the URL query to it, there seems to be a problem with updating the query data dynamically. The function responsible for sending the query is shown below:
search(){
this.$router.push({
name: 'query',
query: this.query
})
}
The 'this.query' object contains all the necessary query data. However, after clicking the button and executing the search method, the navigation to the filter page results in a URL like localhost/query?data=1. The issue arises when attempting to update the 'data' query by adding another element to the object - the URL does not reflect the changes. Subsequently, the search method on the filter page is designed as follows:
updateSearchUrl(){
this.$router.push({
name: 'query',
query: this.query
})
}
Although the code appears identical, the functionality does not work. It is perplexing why it fails when using dynamic data, yet works fine with static data. At present, the problem seems to stem from either the 'this.$router.push' method or the 'query' object itself.
My objective is simply to update the query URL; however, attempts to find a solution have been unsuccessful so far. Reference to solutions such as the article 'Click Here' and trying out the 'replace' method instead of 'push' in '$router' have been made without success.