Guide on transmitting information to an API with Vue.js

Here is an example of my API call:

this.$http.post("{{ route('shop.checkout.save-order') }}", {'_token': "{{ csrf_token() }}"})
.then(function (response) {
if (response.data.success) {
    if (response.data.redirect_url) {
        window.location.href = response.data.redirect_url;
    } else {
        window.location.href = "{{ route('shop.checkout.success') }}";
    }
}
})

Now, I am looking to create an input field like this:

<input type="text" name="delivery_time"  value="insert delivery time">

I want to send the value of this input to the API and retrieve it using the request() helper in Laravel. Here is what I have tried so far:

let formData = new FormData(document.getElementById("delivery_time"));
this.$http.post("{{ route('shop.checkout.save-order') }}", {'test':formData,'_token': "{{ csrf_token() }}"})

However, this approach does not seem to be sending the data to the API. Any help would be appreciated. Thank you.

javascriptlaravelvue.js

Answer №1

To incorporate two-way data binding in your input field, simply include the v-model directive with a dynamic variable as shown below.

<input type="text" name="delivery_time"  value="insert delivery time" v-model="<deliveryTime>">

The v-model directive enables changes made in the input field to automatically update the corresponding variable. This allows easy retrieval of the value in the JavaScript section of your component.

To submit the value on a button click, just pass the value along with any necessary configuration parameters like authentication tokens using the following code snippet.

this.$http.$post(url, {
    deliveryTime: deliveryTime
}, {
    // Additional configurations (e.g., auth token)
})

Answer №2

It seems like you're unsure about the approach you're taking. Have you considered using Vue Router and Axios for handling authentication?

For more insights, check out this article:

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

Tips for utilizing the <base> element in HTML5 for selective anchor tags

I only have one base tag in the head section of my HTML document, and there are two anchor tags with different URLs as shown below: <!DOCTYPE html> <html lang="en"> <head> <base href="https://www.youtube.com"/> </head> &l ...

javascriptjqueryhtml

Step-by-step guide on incorporating edit, update, and discard functionalities within an Angular Material table component (mat-table)

I am currently working on implementing edit, update, and discard functions in an angular material table. While I have been able to successfully edit and update the table row wise, I am struggling with how to discard table rows. If you would like to see wh ...

javascripthtmlcssangularangular-material

PHP code for printing a JavaScript string containing a single quote

I'm encountering an issue with a script generated by PHP. When there is a single quote in the description, it throws a JavaScript error and considers the string terminated prematurely. print "<script type=\"text/javascript\">\n ...

phpjavascriptescaping

Incorporate a file into all API endpoints with Next.js API functionality

Is there a way to incorporate a "bootstrap" file (a file with side-effects) as the first file included in all Next.js APIs? The main issue is that I have a Winston logger in a file that needs to be added to every API endpoint, but this process hinders dev ...

javascriptnext.js

Adjust the size of the canvas element based on changes to its parent's dimensions

I am working with an application that includes a div containing a canvas element to display an image. Additionally, there is a sidebar that can be hidden with the click of a button, causing all other elements to resize and adjust to the remaining space. W ...

javascriptcanvas

Ensure the function has completed setting state before proceeding to the next function

async componentDidMount() { this.loadSelectors(); this.useSelectors(); }; loadSelectors = () => { this.setState({"Selector": "Test"}); } useSelectors = () => { console.log(this.state.Selector); } Is there a way to ensure that loadS ...

javascriptreactjs

VueJS template failing to display content

I'm completely new to using vue js and I'm attempting to implement the switch toggle from this resource: Here is my current HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> ...

vue.js

A guide to incorporating Material-UI ThemeProvider and WithStyles with Typescript

I've been feeling frustrated lately as I've been dedicating the past few days to migrating my React application from JavaScript to TSX. While I appreciate the type checking that TSX provides, I'm struggling with understanding how to implemen ...

javascriptcssreactjstypescriptmaterial-ui

Can you explain the distinction between these two forms of functional components in ReactJs?

What sets apart these two code usages? In the FirstExample, focus is lost with every input change (It appears that each change triggers a rerender).. The SecondExample maintains focus and functions as intended. example import React, { useState } from &quo ...

javascriptreactjsreact-functional-component

Using jQuery to extract a href URL from a div tag with jQuery

Is it possible to extract the href urls from anchor tags within a div tag? <div id="testing"> <a onclick="http://google.com">google</a> <a href="http://facebook.com">facebook</a> <a onclick="http://gmail.com">gmail< ...

javascriptjquery

Guide to importing images (.svg, .png) into a React component

I'm currently facing an issue trying to upload an image file in one of my React components using webpack. My project is already set up with web pack. Below is the code snippet for the component: import Diamond from '../../assets/linux_logo.jpg& ...

javascriptreactjswebpack

The render props on the child component are not appearing on the screen as expected

Recently diving into React Native, I created a stateless component designed to iterate through props that contain objects with arrays of tags. The goal was to extract and display a single tag from each array item. (Refer to the console log in the screensh ...

javascriptreactjsecmascript-6

Pace.js doesn't bother waiting for iframes to completely load before moving on

On my website, I am using pace.js but encountering issues with pages containing iframes. Is there a method to ensure that pace.js considers the content loading within those iframes? I attempted to configure paceOptions to wait for the iframe selector to l ...

javascriptjqueryiframepreloadpace.js

Struggling to retrieve JSON information from the database using AJAX

I am facing a challenge when it comes to fetching data from my database using these technologies. Here is the current scenario: var username = $('#username').val(); var password = $('#password').val(); // This IP is just an example fo ...

javascriptjqueryajaxjsondatabase

The Bootstrap modal form fails to properly handle the POST method when sending data to the server

I am encountering an issue with a button that triggers a modal form <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#agregarProducto">Add Material</a> The modal appears as shown below: https://i.stack.imgur.com/J39x9.pn ...

javascriptajaxasp.net-mvcformsbootstrap-modal

Vue.js - Problem with loading image on screen

Although I have experience with React, I am currently facing the challenge of using Vue for a code assessment for the first time. My struggle lies in creating a reusable image component with WAI-ARIA accessibility. Despite my efforts, I cannot get the imag ...

htmlimagevue.js

Retrieve information from a website and transfer it to a Google spreadsheet

Despite the wealth of information on this topic, I have yet to find a solution that works for me. My goal is to transfer variables obtained from another website to Google Spreadsheet. These are the variables: var a = parseInt($('table.thinline:eq(4) ...

javascriptjqueryajaxweb-scrapinggoogle-sheets

Having trouble with Angular's ng-tags-input? Are you getting the error message "angular is not defined"? Let

I recently created a new Angular project using the following command: ng new "app-name" Now, I'm attempting to incorporate ngTagsInput for a tag input feature. However, every time I try to build and run my app, I encounter an error in my browser con ...

javascriptnode.jsangularnpm

Resize an image to fit perfectly within a material-ui grid

Is there a way to resize images within a grid layout without them getting cropped? Each image I try to fit into the top horizontal grid behaves differently due to varying dimensions. Instead of stretching and fitting into the container, the images end up b ...

javascriptreactjsgridmaterial-ui

Steps to creating a nested function

I'm still learning the ropes of Javascript, and I've been working on creating a personal library to streamline my coding process. Here's the code snippet I've come up with. function myLibrary() { let _this = this; this.addString = ...

javascriptnode.jsfunctiontypeerror