Axios removes the async functionality

Is there a way to achieve the same functionality without using the async function?

async EnvioLogin() {
  const response = await axios.post("api/auth/login", {
    email: this.email,
    password: this.password,
  });
  localStorage.setItem("token", response.data.token);
},

I attempted:

EnvioLogin() {
  const response = axios.post("api/auth/login", {
    email: this.email,
    password: this.password,
  });
  localStorage.setItem("token", response.data.token);
},

However, I encountered the following error:

[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'token' of undefined"

javascriptvue.jsaxios

Answer №1

If you prefer not to utilize async / await keywords, promises are a viable alternative.

axios.post("api/auth/login", {
    email: this.email,
    password: this.password,
  }).then((response)=>{localStorage.setItem("token", response.data.token);})

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 it possible to utilize Vue's v-for function without the need for ul or ol elements?

Hey there, I'm just starting out with Vue and I'm looking to display some data in rows without using numbers or bullet points. Is there a different way to achieve this without the current approach I have below? <li v-for="product in contract. ...

vue.jsbootstrap-4v-for

Accessing an object within an array in a Node.js EJS file

Great job everyone! I've developed a project using Node.js which includes the following schema structure: const debt = new Schema({ name: { type: String, required: true, }, medicine: [{ data: { type: Schema.Types.ObjectId, ...

javascriptnode.jsmongodbmongooseejs

Avoiding the triggering of jQuery events from child elements

Here is the code snippet I am working with: <html> <head> <script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"> </script> </head> <body> <div id=&q ...

javascriptjqueryeventsjquery-events

What is the approach for utilizing Vue List Rendering with v-if to verify the presence of items within an array?

My current implementation utilizes v-if to conditionally display a list of cafes. However, I am interested in filtering the list based on whether a specific drink item is found in an array. For instance, I have a collection of cafes and I only want to dis ...

javascriptvue.jsvuejs2

retrieving JSON data within HTML elements

How can I access the JSON values {{u.login}} from HTML instead of just through JavaScript? Currently, I am only able to access them using JS. Is there a way to directly access JSON values in HTML? At the moment, I am getting them as text. Could you please ...

javascriptjqueryhtmlangularjstypescript

A custom class that uses toggleClass() does not trigger an alert upon a click event

I am encountering an issue with the toggleClass() function in jQuery that I haven't seen addressed before. Despite successfully toggling the class of one button when clicked, I am unable to trigger a click event on the newly toggled class. Here is th ...

javascriptjqueryhtmlcss

Issue found in React Js test - TypeError: source.on does not exist as a function

I'm encountering an issue with my post request using multipart/form-data. Everything runs smoothly, except for the tests which are failing. When running the tests, I encounter an error message: TypeError: source.on is not a function. This is the code ...

javascriptreactjstypescriptjestjsvitest

Arranging a variety of array objects based on unique identifiers

Previously, I successfully combined two arrays into one and sorted them by the created_at property using the sort() method. let result = [...item.messages, ...item.chat_messages] result.sort((a, b) => new Date(b.created_at) - new Date(a.created_at)) it ...

javascriptarrayssortingecmascript-6

Webpack is having trouble resolving the specified file or directory

MyAPP: |--src 　　|--index.js 　　|--content.js |--webpack.config.js index.js : const React = require('react'); const ReactDom = require('react-dom'); const View = require('./content'); ReactDom.render(<View/ ...

javascriptnode.jsreactjswebpackjsx

Double Ajax calls being made in Laravel application

I am working on a Laravel application for managing tasks. The application has a form with four fields: one for the CSRF token, two hidden fields for IDs, and an input field to capture the task title. For submitting the form, I have implemented AJAX. Howev ...

javascriptajaxlaravelformstask-management

Having trouble with a JavaScript element not responding to clicks when displayed inline?

Currently, I am utilizing the "Hotel Datepicker" script found at this website: My goal is to have the datepicker always displayed inline, rather than closing after selecting dates. I attempted to add a function that triggers whenever the datepicker close ...

javascriptjquery

The 'newPassword' must be included as a String parameter

SOLVED The issue has been resolved. It was found that the backend required data in param format, so the form sent by Vue was changed to param instead of data! I am currently working on a password change page. I encountered an error stating that there was ...

spring-bootvue.jsaxios

How come my fixed navigation bar is appearing above my sticky navigation bar even though I positioned it at the bottom in the code?

My current project involves creating a sticky bar and fixed navbar using Bootstrap 5. I structured my code with one file for the sticky navbar and another file for the fixed navbar. The challenge I faced was having the fixed navbar overlap the sticky navba ...

javascriptreactjsreact-bootstrapbootstrap-5

Using JavaScript to organize and categorize data within an array

I am working with a multidimensional array and need to filter it based on the value at a specific index position. Here is what the array looks like: arr = [ [1 , 101 , 'New post ', 0], [2, 101 , 'New Post' , 1], ...

javascriptangularjsarraysnode.js

Tips on converting deeply nested JSON into an excel file using Node.js

I am attempting to convert the JSON data below into an Excel file using XLSX. Although it successfully converts my JSON to Excel, I encountered an issue where the nested array of dailyPointsArray appears blank after conversion. Code Attempted const XLSX ...

javascriptnode.jsexcelexpressxlsx

Utilize JQuery's .append() method to insert a new element into the DOM and then trigger an "on click" event within

I am attempting to use the .append() method to add a new radio button, and then when I click on the new radio buttons, trigger a new function. However, I am having trouble achieving this with my current code: HTML: <label>Where should the photo be ...

javascriptjqueryhtmlappend

Is there a way to utilize the reset() function within an input form?

Is there a way to automatically reset the textbox when submitting a value? Below is my code: <!DOCTYPE html> <html> <body> <ul id="myList"> </ul> <input type="text" id="myText" value="&q ...

javascripthtmlcss

Keeping Vuex state in harmony with Firebase

When it comes to keeping my Vue.js state in sync with Firebase, I have implemented a strategy that involves setting up references to Firebase, getters, mutations, and actions in a separate folder within the store. So far, everything seems to be working fin ...

firebasevue.jsstorevuex

Encountering a fresh issue after updating to TS version 4.4.3 while accessing properties of the top "Object may be 'null'."

After upgrading my project to TypeScript 4.4.3 from 3.9.9, I encountered a change in the type declarations for the top property. My project utilizes "strictNullChecks": true, in its configuration file tsconfig.json, and is browser-based rather t ...

javascripttypescript

Unlocking the potential of input values in Angular.jsDiscovering the secret to

I'm currently experimenting with the angular date picker directive. My goal is to retrieve the entered date value from the date picker and log it to the console. However, all of my attempts so far have been unsuccessful. Here's a snippet of my c ...

javascriptangularjs