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;
    },

javascriptvue.jsvuexfetch-api

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 absence of a defined window - react-draft-wysiwyg integration with Next.js (SSR) is causing issues

Currently, I am in the process of developing a rich text editor that is used to convert plain HTML into editor content using Next.js for SSR. While working on this project, I encountered an error stating "window is not defined," prompting me to search for ...

javascriptreactjsnext.jsreact-draft-wysiwyg

Vuejs has the capability of sending data even after the page or browser has been

When you close a tab or browser, it is necessary to send the form data to Vue. This can be achieved through the mounted or created methods using window.addEventListener("beforeunload", this.unload). Unfortunately, I encountered an issue where the ...

vue.js

Leveraging JavaScript's regular expressions to identify and capture the end of a

I am in need of using regular expressions (regex) to validate an ajax call to retrieve an output log from a server to check if a certain process is "finished". I have a PHP file that can provide the last line of the log under any circumstances. The Ajax ...

javascriptjqueryregexserver-application

Attempting to delete a request using FormData resulted in a 500 error response

Currently, I am working on deleting an attachment by sending a request with form data containing a URL through an API path along with an ID. deleteAttachment(id, url) { const formData = new FormData(); formData.append('url', url); ...

javascriptvue.jsaxiosmultipartform-datamultipart

Accessing an object's property within a mapped array in a Next.js application is possible

Currently, I am attempting to iterate through an array of objects and extract the link property as a <li></li> element. However, I am facing an issue where nothing is being returned: import { useState, useEffect } from "react"; import ...

javascriptjsonreactjsnext.js

What is the best way to create a transparent section within a div to reveal the content below?

My goal is to create a user interface that resembles the design shown in this image https://i.stack.imgur.com/GfiZ8.png One issue I'm facing is how to make the center of the top div circular and transparent, just like in the reference image. I consi ...

htmlcssvue.jsnuxt.js

How to retrieve properties of the final item in an array using Vue.js

Struggling with Vue.js JavaScript implementation. This is the current code: <div id="app"> <h1>Items</h1> <div v-for="item in items"> <input v-model="item.val"> </div> <button @click="addItem"> Ne ...

javascriptarraysjsonvue.jsjavascript-objects

Effortlessly Retrieve Initial Data from Ajax in Vue3 using Composition API

After extensively researching different approaches, I am leaning towards using the Vue3 composition API in its "setup" form for future compatibility. However, I am encountering a significant amount of variability across these approaches. My current form i ...

vue.jsvuejs3vue-composition-api

Unable to load routes from ./app.js in the file ./src/routes/index.js

Just dipping my toes into the world of nodejs. I recently moved all my routes from app.js to a separate file located at PROJECT_DIR/src/routes/index.js. However, when I try to open the page in my browser, it displays "Cannot GET /wines". Below are snippets ...

javascriptnode.jsexpress

The Angular controller failed to return a defined value

I recently took over a legacy VB.Net application and noticed that both the ng-app and ng-controller directives are present on the HTML element in the root master page: <html runat="server" id="html" ng-controller="MasterController"> The ng-app attr ...

javascriptangularjs

Tips for displaying a loader image with a centered message and preventing the bootstrap modal dialogue box from closing during an AJAX response from a PHP file

I am using Bootstrap version 3.0.0. Below is the HTML code for a Bootstrap Modal: <div class="modal fade" id="newModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> < ...

javascriptphpjqueryajaxtwitter-bootstrap-3

Is it possible to determine which child element is currently in view within a scrollable parent div?

In an attempt to replicate a "current page" feature using divs, similar to a PDF reader. document.addEventListener("DOMContentLoaded", function(event) { var container = document.getElementById("container"); container.onscroll = function() { let ...

javascripthtmlcssscroll

Encountering an issue... invariant.js:42 Error: A `string` value was received instead of a function for the `onClick` listener

Currently, I am working on creating a form that allows users to build quizzes without any restrictions on the number of questions they must include. To achieve this, I plan to add an "add question" button at the bottom of the quiz form, allowing users to d ...

javascripthtmlreactjs

Utilizing Angular Components Across Various Layers: A Guide

Consider the following component structure: app1 -- app1.component.html -- app1.component.ts parent1 parent2 app2 -- app2.component.html -- app2.component.ts Is it possible to efficiently reuse the app2 component within the ap ...

javascriptangulartypescript

Does the triple equal operator in JavaScript first compare the type of the value?

When using the triple equal operator, it not only measures the value but also the type. I am curious about the order in which it compares the value and returns false if they do not match, or vice versa. ...

javascriptnode.jstriple-equals

Is it possible to convert a blob to an image file using the FileReader in HTML

client side code <head> <script> var reader = new FileReader(); var objVal; var image = new Image(); reader.onload = function(e) { document.getElementById('propertyImg').setAttribute('src', e.target.result); }; fun ...

phpjavascripthtml

Distinctive titles for JavaScript constructors/prototypes compared to classes

When working with JavaScript ES6, classes allow us to write code like this: class RectangularShape { constructor(height, width) { this.height = height; this.width = width; } getArea() { return this.height * this.width } static some ...

javascriptecmascript-6terminologyecmascript-5

access the content of a div element by its class attribute

Within the div element, a value has been set and I am attempting to retrieve this value using its class. However, the code below does not return the desired value. What mistake am I making here? How can I resolve this issue? <div title="Find on Amazo ...

javascriptjquery

Bring in styles from the API within Angular

My goal is to retrieve styles from an API and dynamically render components based on those styles. import { Component } from '@angular/core'; import { StyleService } from "./style.service"; import { Style } from "./models/style"; @Component({ ...

javascriptcssangularsass

Retrieves MySQL SQL findings and converts them into a JSON structure

I'm in the process of integrating Typeahead.js into my website. The Typeahead.js plugin will retrieve data from a remote page that returns JSON, similar to: http://example.org/search?q=%QUERY Here's the PHP code I've written for my site: ...

javascriptphpmysqljson