Avoid re-rendering the page in Nuxt when adjusting dynamic parameters

My page has two dynamic parameters that trigger the fetch method to run again when the URL params are changed. I want to avoid this behavior.

Fetch Method:

async fetch() {
    await this.getFlightResult();
}

Get Result Method:

async getResult() {

    this.$router.push({
        path: `/air/${originCity?.id}-${destinationCity?.id}/${originCity?.name}-${destinationCity?.name}`,
    });
    await this.getFlightResult();
}

Get Flight Result Method:

async getFlightResult(){
   const { data } = await this.$axios.get(`/api/v1/flights')
}

When changing the URL params, both the fetch and getResult methods are triggered simultaneously, causing unwanted behavior.

Answer №1

If you want to update the query parameters without affecting the path parameter, you can do so without causing the page to reload:

this.$router.push({query: { myFirstQuery: 'newFoo', mySecondQuery: 'newBar'}})

To track changes in the queries, you can use code like this:

watch: {
    '$route.query': {
      immediate: true,
      handler(newVal){
        // perform necessary updates here
      }
    }
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Text in Angular vanishes upon reopening

I have a code snippet where I am trying to allow the user to edit and save a paragraph displayed on a side panel of the main page. Although the code works fine, allowing users to update the text and see it reflected in the network upon saving, there seems ...

Looking to activate a button upon clicking a button on a different page using php and javascript

Is it possible for the first user logged in on one page to have a button, and when clicked, enable a disabled button on another page where the second user is logged in? This functionality needs to be implemented using PHP/JavaScript. Thank you in advance ...

Using the outer ng-repeat's object property to filter nested ng-repeat items

I'm currently working on nesting two ng-repeats with two separate JSON files. The goal is to filter the second ng-repeat based on parameters from the first ng-repeat. The first JSON file, $scope.matches, includes information about each match in the W ...

Ways to retrieve output from a JavaScript function

How can I successfully return the result from response.on within the signIn function? const signIn = async (password) => { var request = new DeviceAuthQuery(); request.setPassword(password); var response = client.authenticate(request, {}, (err, ...

Is there a way to convert the existing JavaScript code for a hyperlink so that it can be triggered by clicking a button instead?

I have a JavaScript code that works well when the hyperlink below is clicked: <a href="delete_event.php?event_id=110" onClick="return ConfirmDelete()" class="list-group-item">Delete Event</a> <script> function ConfirmDelete() { var ans ...

Having trouble with my JavaScript code in Visual Studio because of a bundler issue. It's throwing an Uncaught ReferenceError for trying to access a variable before initialization

My AJAX request looks like this: $.ajax({ method: 'GET', url: '/api/some-data', headers: { 'Content-Type': 'application/json' }, success: function(data) { if (data != null) { var userDat ...

Ways to exit the current browser window?

Is there a way to close the current browser window using JavaScript or another language that supports this functionality? I've tried using the window.close() function, but it seems to only work for windows opened with window.open(). Thank you in adv ...

Acquire the Microsoft Graph Token using the adal-angular package's authentication context provided by adal.js

I am currently utilizing the authenticationContext that was established using the 'adal-angular/lib/adal.js' package in order to obtain a token for accessing microsoft graph resources. Error: User Login is required. The error message appears a ...

The dropdown menu repeatedly opens the initial menu only

My script fetches data from a database to populate a table with one row for each member. Each row contains a dropdown list with the same class and ID. Although I attempted to open and close the dropdowns using specific codes, I am facing an issue where onl ...

Is there a way to incorporate the Indian rupee symbol into a Google chart?

I've been trying to incorporate the Indian Rupee symbol into a Google chart using the code below: var formatter = new google.visualization.NumberFormat({ prefix: '&#8377;' }); However, I'm encountering an issue where ...

Using a combination of Javascript and PHP to dynamically update the innerHTML of multiple elements

I am working on updating the innerHTML of a webpage using Javascript after an onclick event. In my java.js file, I am utilizing this code to access a PHP page that echoes back the text for updating the innerHTML. The issue arises when attempting to update ...

Collaborative spreadsheet feature within a browser-based software platform

I am using an Angular-based SPA for my web application. My goal is to be able to open an Excel file within the application itself. Currently, I have a menu button or link that is linked to a specific path, for example //192.168.10.10/sharedExcels/myExcel. ...

Error: The gulp-cssmin plugin encountered a TypeError because it attempted to read the property '0' of a null

I am attempting to condense my code, but I am encountering this error: D:\gulp-compiler\node_modules\gulp-cssmin\node_modules\clean-css\lib\selectors\extractor.js:66 return name.replace(/^\-\w+\-/, ...

Include buttons in the HTML template once JSON data has been received

I am working on a feature to dynamically add buttons to the DOM using JSON data fetched from an API when users visit the site. Although I have successfully implemented the function to retrieve the data, I am facing challenges in adding these buttons dynami ...

Utilizing variables in GraphQL requests

UPDATE: see the working code below GraphiQL Query I have this query for retrieving a gatsby-image: query getImages($fileName: String) { landscape: file(relativePath: {eq: $fileName}) { childImageSharp { fluid(maxWidth: 1000) { base64 ...

Service for Posting in Angular

I am looking to enhance my HTTP POST request by using a service that can access data from my PHP API. One challenge I am facing is figuring out how to incorporate user input data into the services' functionality. Take a look at the following code snip ...

Challenges with JavaScript arrays object

I am new to JavaScript and struggling with how to extract data from this array. Can you confirm if it is formatted correctly? Shown below is the console output of the array object: [] 0: Item {id: 0, symbol: "VBIV", boughtDate: "2018-07-22", company: "V ...

Methods for setting the value of a scope variable within a controller's function

I have a goal of presenting a page that calculates a balance in the background and displays it. To achieve this, I decided to separate the balance into its own directive. Here is the directive I have created: app.directive('smBalanceInfo', fun ...

Creating a phonecat application using Angular on a node server

As a newcomer to Angular, I am currently in the process of setting up the Angular phonecat application. To begin with, I downloaded the code from this location: https://docs.angularjs.org/tutorial/ After that, I installed Node.js on my system. Now, I a ...

JavaScript: Creating keys for objects dynamically

const vehicles = [ { 'id': 'truck', 'defaultCategory': 'vehicle' } ] const result = [] Object.keys(vehicles).map((vehicle) => { result.push({ foo: vehicles[vehicle].defaultCategory }) }) c ...