POST request with Vue Material formVue Material form submission using POST

I am working on creating a login page using vue-material. The base form I am using can be found here. My server side is built on laravel 5.4.

This is my template:

<div id="app">
  <md-layout md-tag="form" novalidate @submit.stop.prevent="submit" md-align="center">
    <md-layout md-tag="md-card" md-column md-flex="30" md-flex-medium="40" md-flex-small="60" md-flex-xsmall="90" class="md-primary">
      <md-card-header>
        <div class="md-title">Login</div>
      </md-card-header>

      <md-card-content>
        <md-input-container>
          <md-icon>person</md-icon>
          <label>Email</label>
          <md-input email required v-model="email" />
        </md-input-container>

        <md-input-container md-has-password>
          <md-icon>lock</md-icon>
          <label>Password</label>
          <md-input type="password" required v-model="password" />
        </md-input-container>
      </md-card-content>

      <md-card-actions>
        <md-button type="submit">Login</md-button>
      </md-card-actions>
    </md-layout>
  </md-layout>
</div>

Some questions I have:

  1. How do I ensure the form is using POST and not GET?

  2. How can I make sure that the input field values are sent correctly?

Answer №1

To convert the request from a GET to a POST method, you can update the method attribute within the md-layout tag that is being used as a form:

<md-layout 
  md-tag="form" 
  method="POST" 
  novalidate 
  @submit.stop.prevent="submit" 
  md-align="center" 
>

Next, make sure to include name attributes for the input fields in order to send their values via POST:

<md-input email required v-model="email" name="email" />

Similarly,

<md-input type="password" required v-model="password" name="password" />

Check out this functional code example on CodePen.

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

Is there a way to implement word wrapping in li text without making any changes to its width

Is there a method to wrap the content inside li elements without modifying their width? As an illustration, consider the following structure - <ul> <li>Text Example</li> <li>Text Example</li> <li>Text Exampl ...

Best method for retrieving information from a string

Exploring different techniques to extract data from a string is a common practice, including methods like substring and split. Is there an optimal approach to accomplish this task? For instance, when faced with a URL structure such as http://myServer:8000/ ...

Determine the array with the highest value by comparing multidimensional arrays in JavaScript

I have a multidimensional array with names and corresponding integer values. I want to compare the integer values within each nested array to find and return the one with the highest value. var nums = [ ['alice', 'exam', 60], [ ...

Implementing a CSS stylesheet that is triggered when the user reaches the top of the webpage, and incorporating an

Currently, I have code that controls the hiding and showing of my navigation menu when a user scrolls up on the page. $.fn.moveIt = function(){ var $window = $(window); var instances = []; $(this).each(function(){ instances.push(new moveItItem($( ...

Step-by-step guide for configuring a computed property in Vue to dynamically alter the color variant of a vue-bootstrap badge

I'm currently working on setting up a computed variable in Vue to determine the variant of a Bootstrap badge tag <b-badge> based on data retrieved from a JSON file. The response from the JSON file is stored in an array called configData. The co ...

The `chrome.windows` API is not defined for this particular Chrome

I'm currently in the process of developing a Chrome extension that will allow users to effectively manage open tabs within a specific application's website. Here is the current manifest file: { "manifest_version": 2, "name": "AT Tabs", ...

Unusual characteristics of decision-making

Here is a snippet of my JavaScript code: function getSelectedText(){ if(window.getSelection){ select = window.getSelection().getRangeAt(0); var st_span = select.startContainer.parentNode.getAttribute("id").split("_") ...

Displaying image behind bootstrap modal using Lightgallery js

Can anyone help me with an issue I'm having with previewing images using lightgallery js? The image is showing up behind the modal window. https://i.sstatic.net/FncZB.png I'm not sure why this is happening Here's the javascript code I am ...

Each time the page renders, LocalStorage is initialized with a fresh empty array

I've encountered an issue while trying to update my localStorage with new items added to my shopping cart. Each time an item is added, an empty array appears before it (see screenshot). Can anyone explain why this is happening? I'm considering u ...

What is the best way to keep a header row in place while scrolling?

I am looking to keep the "top" row of the header fixed or stuck during page scrolling, while excluding the middle and bottom rows. I have already created a separate class for the top row in my header code: view image description ...

Comparison: JavaScript Cookies vs PHP Cookies

I have been trying to implement the following code: JS: Cookies.set(post_id + '_' + user_ip, post_id + "_" + user_ip, { expires: 1 }); PHP: $cookie_str = $post_id.'_'.get_client_ip(); if (isset($_COOKIE[$cookie_str_]) ){ print_r ...

Searching for specific elements within a certain range based on their

I currently have a table that consists of rows and columns, each containing specific attributes: <tr attr-y="1"><td attr-x="1">...</td><td attr-x="2">...</td>...</tr> <tr attr-y="2"><td attr-x="1">...</td ...

Discovering a method to detect clicks outside of a React functional component

Looking to identify when a click occurs outside of a React functional component. After stumbling upon an article, I followed the provided code but unfortunately, it didn't work as expected. Despite identifying the issue, I am still searching for a so ...

Experiencing a 403 forbidden error while trying to dynamically load images using AngularJS

I am facing an issue while loading json data from my api that includes URLs to images outside of my domain. Although I have worked on similar tasks in the past, not with Angular, I have never encountered this particular problem... Visit my JSFiddle. When ...

I am unable to pass a variable through a callback, and I cannot assign a promise to a

Currently, I am facing a challenge with my code where I need to loop through a hard-coded data set to determine the distance from a user-entered location using Google's web API. The issue lies in passing an ID variable down through the code so that I ...

Error encountered while rendering content in an Angular template

I'm currently integrating ngx-carousel into my application. Interestingly, the carousel works perfectly when I manually input the data. However, when trying to fetch the data from the server, it fails to work as expected. Take a look at my code snip ...

Java script pop-up notifications always show up

This Text Goes Above the Form <?php require_once "core-admin/init-admin.php"; if( !isset($_SESSION['admin_username']) ){ $_SESSION['msg'] = 'page cannot be opened'; header('Location:admin_login.php&ap ...

Display a loading indicator while rendering several Vue components

My current challenge involves loading multiple Vuetify card components based on the selected category at the top of the page. The issue arises when the array renders more than 50 cards, causing a significant delay in loading time. While I am not overly co ...

A guide on iterating through carousel elements using Vanilla JavaScript

I am currently extracting data from The Movie Database and I aim to showcase the retrieved information on my webpage using a carousel card with 3 slides. Here is a summary of my progress so far, html, <div class="details"><!--Movie deta ...

There are two distinct varieties of object arrays

I recently encountered an issue while trying to sort my array of Star Wars episodes by episode ID. The problem emerged when comparing two arrays: one manually inputted in the code snippet labeled as "1" on the screenshot, and the other generated dynamicall ...