Is it possible to pass parameters through a GET query to Vue.js?

When I apply a filter, the query in the API disappears. A PHP developer suggested that the request should be GET instead of POST. How can I pass parameters to the GET query?

Here is an example of my POST request:

export const filterDate = (options) => {
    console.log(options)
    return axios.post(url, options).then(({ data }) => {
        if (data.errors) throw new Error(JSON.stringify(data.errors));
        return data;
    })
};

However, when I replace the post with get, the parameters are not transferred.

Answer №1

To include parameters in a GET request, use an object with a "params" property like this:

axios.get('/data', {
    params: {
      key: 'value',
      id: 98765
    }
  });

Answer №2

When it comes to options, you can specify a parameter using an object:

params: {
  key: value
},

Alternatively, you can create a URLSearchParams object:

const params = new URLSearchParams();
params.append('key', 'value');
axios.get(url, params);

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

What is the best way to incorporate external HTML content while ensuring HTML5 compatibility? Exploring the different approaches of using PHP, HTML

While this may seem like a simple task to the experts out there, I have been struggling for over an hour without success... My objective is to use a single footer file and menu file for all my webpages while considering blocking, speed, and other factors. ...

Ways to expand the width of a b-tooltip?

When using b-tooltip tags from BootstrapVue to display information, I am looking to customize the width of the tooltip for longer text messages and adjust the text alignment. How can I achieve this? Is there a way to style it accordingly? <b-button i ...

Encountering difficulties triggering the click event in a JavaScript file

Here is the example of HTML code: <input type="button" id="abc" name="TechSupport_PartsOrder" value="Open Editor" /> This is the jQuery Code: $('#abc').click(function () { alert('x'); }); But when I move this jQuery code to a ...

Exploring Bootstrap4: Interactive Checkboxes and Labels

My form design relies on Bootstrap, featuring a checkbox and an associated label. I aim to change the checkbox value by clicking on it and allow the label text to be edited by clicking on the label. The issue I'm facing is that both elements trigger t ...

Solving the Problem of Input Values with Jquery and Javascript

I am facing a challenge in making a div vanish with the class 'backarea' while simultaneously displaying another div with the class 'successLog' on the screen. The catch here is that I want this transition to occur only when specific us ...

Launching an embedded webpage in a separate tab within the main browser window

In my current setup, I have implemented an iframe within the main window. The iframe includes a form where users can input data and submit it. Currently, I achieve the submission with the following code: var openURL = '/results/finalpage'; windo ...

I encountered a TypeError when using PropTypes with a string type

Encountered an error related to the prop-types library in a React 16 application after updating the node modules. To investigate this issue, I created a new React 16 create-react-app project and the same error occurred. Here is my code: index.js fi ...

I need a counter in my React application that is triggered only once when the page scrolls to a specific element

I've encountered a challenge with a scroll-triggered counter on a specific part of the page. I'm seeking a solution using React or pure JavaScript, as opposed to jQuery. Although I initially implemented it with states and React hooks, I've ...

Using Javascript to dynamically swap images within a div as the user scrolls

Can someone help me achieve a similar image scrolling effect like the one on the left side of this website: I am looking to change the image inside a div as I scroll and ensure that the page doesn't scroll further until all the images have been scrol ...

Ensure that JSON requests are written in English when using FullCalendar

I am currently working on implementing a multi-language application using FullCalendar. My goal is to have the calendar display in multiple languages while keeping the JSON request always in English. However, when I switch languages, the JSON request also ...

The AWS API Gateway quickly times out when utilizing child_process within Lambda functions

I'm encountering an issue with my Lambda function being called through API Gateway. Whenever the Lambda triggers a spawn call on a child_process object, the API Gateway immediately returns a 504 timeout error. Despite having set the API gateway timeou ...

"Despite receiving a successful response from curl, AWS Lambda and API Gateway return a 500 error when accessed from a

I am facing challenges with AWS Lambda and API Gateway. While I can successfully call my API using curl and Postman, I am unable to do so from my browser. It works when: curl --header "Content-Type: application/json" \ --request POST \ ...

After being redirected from another page using history() in React, the state is initially set to null but later gets updated to the correct value - Firebase integration

After logging in and being redirected to the profile page, I encounter an error that says 'Unhandled Rejection (TypeError): Cannot read property 'email' of null'. How can I ensure that the state is set before proceeding with any additio ...

AngularJS mdDialog not supporting Tinymce functionality

I'm attempting to integrate the TinyMCE editor into an AngularJS mdDialog. Working Plunker: http://embed.plnkr.co/s3NsemdcDAtG7AoQRvLh/ Plunker with issues: http://embed.plnkr.co/fL8kGLl3b4TNdxW1AtKG/ All features are working fine except for the d ...

What causes useEffect to trigger twice when an extra condition is included?

Attempting to create a countdown timer, but encountering an interesting issue... This code triggers twice in a row, causing the useEffect function to run twice per second. 'use client' import {useState, useEffect, useRef} from 'react' ...

Keep the user on the current page even after submitting the parameter

I have a situation where I am loading a page into a specific div. This loaded page contains a link that includes a parameter which directs to another page for deletion. However, when I click on the loaded page within the div, it redirects me to the deletio ...

Repeated Type Declarations in TypeScript

Recently, I've come across an interesting challenge involving duplicated TypeScript type declarations. Let me explain: In my project A, the dependency tree includes: A->@angular/http:2.3.1 A->B->@angular/http:2.3.1 Both A and B are install ...

The Videojs controls are unresponsive to clicks

Having a strange issue with videojs. I've been attempting to load videojs in the same way as outlined in the documentation, using a dynamic video tag. videojs(document.getElementById('myVideo'), { "controls": true, "autoplay": false, "prelo ...

Get rid of unsafe-eval in the CSP header

I am facing an issue with my old JavaScript code as it is using unsafe-eval. The client has requested to remove unsafe-eval, but the code relies on the eval method in all JavaScript libraries. Removing unsafe-eval breaks the functionality of the code. How ...

Receive alerts for when your jwt token is about to expire

Seeking assistance in setting up a warning system for when the jwt token expires (default is set to 30 minutes). I want the user to receive a warning and then be redirected to the login page. Can anyone help with this? const isInRole = (role: string): bo ...