What is the best way to pass multiple parameters along with the context to a URL in Vuex?

Link to StackBlitz

I am currently working on how to send multiple action parameters with context to a URL. I have been encountering a 400 error in my attempts. The selectedPoint and departurePoint are coming from child components and stored as variables in their data. My code snippet for this scenario is:

async getFlights(context, selectedPoint, departurePoint) {
        
      const res = await fetch(
        `http://api.travelpayouts.com/v2/prices/month-matrix?currency=rub&origin=${selectedPoint}&destination=${departurePoint}&show_to_affiliates&token=${context.state.token}`,
      );
      if (res.ok) {
        let result = await res.json();
        context.commit('setFlights', result.data);
      }
      return res.ok;
    },

Answer №1

Actions in this context only accept two parameters: context and payload.

When passing multiple parameters, it is necessary to use an object.

async getFlights(context, { selectedPoint, departurePoint }) {
    
  const res = await fetch(
    `http://api.travelpayouts.com/v2/prices/month-matrix?currency=rub&origin=${selectedPoint}&destination=${departurePoint}&show_to_affiliates&token=${context.state.token}`,
  );
  if (res.ok) {
    let result = await res.json();
    context.commit('setFlights', result.data);
  }
  return res.ok;
},

When invoking the action, make sure to pass the values as an object.

Visit here for more information on Vue.js actions.

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

The array contains no elements, yet it is not empty, and when stringified with JSON.stringify, it results

I've been working on developing an event registration page for a school club I'm involved in, but I'm encountering a problem where my program is unable to correctly read the contents of an array and display each item as a ListItem within a L ...

Is there a way to hide a button on this virtual keyboard after it has been clicked?

After creating a virtual keyboard using HTML and CSS, I am looking to implement JavaScript code that will hide a button after it is clicked. Here is the code I have tried so far: function hideButton() { var button = document.getElementById("simple_butto ...

Issues with utilizing Fetch API and JSON Data

I'm encountering some difficulties while trying to interact with my json file. I am using the fetch API to retrieve my json file but, unfortunately, when I log the response to the console, I don't see any data returned. Instead, what appears is a ...

Tips for organizing the router.js file in VueJs

With my router.js file currently reaching around 500 lines, I’m looking for a better way to structure it. { path: "/", component: () => import("./../src/views/dashboard/Dashboard.vue"), meta: { auth ...

Adjusting the overflow of a parent div based on the position of the div within it by scrolling

I'm trying to create a page with 3 different sections: <div class="container" id="main-container"> <div class="section" id="profile"> Hello World </div> <div class="section" id="projects"> Hello World 2 ...

Issue with Angular Route Guard - Incorrect redirection to login page

I'm encountering an issue with my Angular app where even after the JWT token has expired, I am still able to navigate within the application without any API data being accessible. I've double-checked my setup and it seems right, but for some reas ...

Showing off map positions on D3 using data from a JSON array

I have received a JSON response containing coordinates from PHP in the following format: {"All":[{"longitude":"36.8948669","name":" Manyanja Rd, Nairobi, Kenya","latitude":"-1.2890965","userID":"1"}, ...]} Next, I am processing it using JavaScript as sho ...

Having trouble getting the default NextJS template to work with TailwindCSS

Sysinfo: > Windows 11 > Node: v18.16.0 > Next: 13.4.13 > Tested Browser: Firefox, Chrome. Step to Reproduce To recreate the issue, I created a NextJS project using the command npx create-next-app tezz with specific options selected: Would you ...

Issues arise when submitting the form on a web page with an MVC 4 partial view, causing the page

Scenario: I am currently working on a C#/MVC 4 project where I have a view that includes a partial view. The main view consists of a form with a submit button, and the partial view is initially hidden but can be displayed by selecting a checkbox. Problem: ...

Server-side rendering or updating of React elements

One issue I am facing in my React app is that while all components can update themselves through the browser, a specific module called jenkins-api only functions when called server side. To retrieve the data and pass it into my template, I have utilized th ...

The connection of props in VueJS

Looking to establish linking dependencies between props in a VueJS component? Specifically, I want to set up a scenario where if one prop is present, another prop becomes required, but unnecessary if the first prop is absent. props: { url: { type ...

Creating URL query parameters for a nested REST API: A step-by-step guide

I am faced with the challenge of constructing a POST request for a nested REST API (json object) dedicated to search functionality. I am unsure about how to format the URL parameters due to its complex nesting structure. How should I include question marks ...

Adding a JSON array to HTML using JavaScript

Looking to incorporate JSON Array data into an HTML list with Headings/Subheadings using JavaScript. I experimented with two methods - one involving jQuery and the other mostly vanilla JS. The initial attempt (link here: http://jsfiddle.net/myu3jwcn/6/) b ...

Utilizing vue-touch-events in conjunction with vue-router

I attempted to implement vue-router along with vue-touch-events in the following manner: <i v-touch="go('home')" class="fas fa-bars"></i> <script> export default { name: "Nav", methods: { go: function(state) { ...

Switch the orientation of a live table moving horizontally to vertically and vice versa

config.previewData = [ { Products:27989, Total Customers:294, Metrics:"MVC", Toner Products:5928, INK Products:22061 }, { Products:56511, Total Customers:376, Metrics:"SMB", ...

Retrieving form data from within the resource error callback scope

For my client-side validation on submit, I am calling a resource if the form is valid. On success, everything works fine. However, when encountering an error handler, I also perform server-side validation on my data transfer object bean which contains Hibe ...

Navigating through different views in Angular 2 using UI Router and ng2 routing directly from

I am currently utilizing the UI-Router ng2 and attempting to change routes after a certain function is triggered. My code snippet looks like this: SomeFunction() { if(condition){ router.navigate(['/newRouteName']); } } It's ...

Using jQuery, how can I dynamically change the stacking order of an element when clicked?

I'm struggling to change the z-Index on button click. I have a static image and a dynamic div, and I want to send the #imgDiv1 behind the static image. Unfortunately, despite trying everything, I haven't been able to achieve this. You can check ...

Guide to importing the Slider Component in React using Material-UI

I am trying to incorporate the Slider Component from @material-ui/core into my React project. However, when I attempt to import the Slider using this code: import Slider from '@material-ui/lab/Slider';, it gives me an error stating Module not fou ...

Seeking assistance with basic Javascript/Jquery for Ajax on Rails 3 - can anyone help?

I've been diving into JavaScript and hit a roadblock. At the moment, I have a very basic gallery/image application. My goal is to create a functionality where clicking on an image will lead the user to a URL stored in my model data using AJAX. Additi ...