Error: Uncaught TypeError - Unable to assign a value to the 'status' property

Hello everyone, I am currently facing an issue with validating the response from my server using Axios in VueJS.

axios.post('/login', {
  email: this.email,
  password: this.password
}).then(response => {
  if (response.status == 200) {
    $root.$data.auth = true;
  } else {
    alert('Uh oh');
  }
}).catch(e => {
  if (e.response.status == 422) {
    this.error = "Did you forget your login details?";
  } else {
    this.error = "Something unexpected happened: " + e.response.status;
  }
});

After successful logins, I am receiving this error in the console:

Uncaught (in promise) TypeError: Cannot set property 'status' of undefined

This is confusing for me because according to the Axios documentation, I should be able to access the response status object and use it for conditional statements. Can anyone help clarify this?

javascriptjsonajaxvue.jsaxios

Answer №1

It is advisable not to solely rely on checking the response status, as if it is not 200(OK), the code will proceed to execute the subsequent callback which is .catch(), allowing you to effectively handle any encountered errors.

Answer №2

I managed to fix the error.response.status undefined issue by implementing the following solution:

const errStatus = (typeof error.response.status !== 'undefined') ? error.response.status : 'unknown';
const errText = (error.response.statusText != null) ? error.response.statusText : 'unknown';
const errElse = { email: [`[Error status code: ${errStatus}].....[Error status: ${errText}]......Please submit a trouble ticket`] };
this.errors = errElse;

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 causes Vue child components to autonomously update data in the parent component?

I am attempting something similar to this: main component <template v-else> <b-card class="d-flex card-shadow"> <b-list-group-item class="d-flex justify-content-between border-0 pl-0" ...

vue.jsvuejs2vue-component

Distinguishing Routes for Administrators and non-Administrators in Laravel

I am currently developing a Single Page Application (SPA) using Laravel and Vue. My goal is to have two separate routes for admin and non-admin users, as shown below. // For Admin Route::any('admin/{any}', static function () { return view(&a ...

regexlaravelvue.js

Obtaining array value in JSON and incorporating it into a datatable

I have the following JSON data: { "aaData": [ [ { "displayValue": "Home Page", "link": "http://somelink.com" }, "London", "1983" ], [ { ...

jqueryjsondatatable

The Click Event Is Triggering Even with Correct Callbacks Being Set

I am struggling to understand why these functions are not executing properly. I know the correct syntax for binding a function, like this: $('#idOfThing').bind('click', foofunc); function foofunc() { ///do things } However, I am facin ...

javascriptjqueryjquery-callback

What causes inability for JavaScript to access a property?

My current coding project involves the usage of typescript decorators in the following way: function logParameter(target: any, key : string, index : number) { var metadataKey = `__log_${key}_parameters`; console.log(target); console.log(metadataKey ...

javascripttypescriptprototype

Transform JSON data into key-value pairs using Python

I am currently working with a JSON file that has the following structure: {"Africa": { "invitee_event_type_page": { "Total Events": "194" }, "invitee_meeting_cance ...

jsonpython-3.x

Fuzzy background when you scroll

My container has an image that blurs when you scroll down the page by 50 pixels. I feel like I've seen this effect somewhere before, but I can't quite recall where. I want the text to remain unaffected and not turn blue. Here is the HTML: <d ...

javascriptjqueryhtmlcss

Inspect the properties of a ReactJS component using Playwright

I'm relatively new to end-to-end (E2E) testing. One area I am looking to test involves changing the shipping address and automatically setting it as the billing address. For example, if I input Grove Street as my shipping address, I want it to mirror ...

javascriptreactjstestingplaywright

Issues arise when attempting to make a SOAP request in NodeJS, as opposed to PHP where it functions seamlessly

As I work on integrating a SOAP-API to access data, I encounter an error when trying to implement it in my ExpressJS-Service using NodeJS. The API documentation provides examples in PHP, which is not my preferred language. My PHP implementation works flawl ...

javascriptphpnode.jsexpresssoap

Delete the final comma from both a JSON document and a PHP script

Currently, I am dealing with a JSON file in PHP and need to eliminate the last comma as it is causing an error within my code snippet: { "data": [ <?php require_once("../../config.php"); $qtodos = $mysqli->query("SELECT * FROM negocios"); ...

phpjson

Different methods to avoid using $scope.$watch in a directive when dealing with an undefined variable

As I work on my angularjs application, I find myself utilizing directives for reusable UI elements across different pages. However, I encounter a challenge when a directive depends on a value from a promise. In such cases, I have to employ $scope.$watch al ...

javascriptangularjsajaxangularjs-scopewatch

Issue with uploading files on Internet Explorer versions 8 and 9

function sendFile(){ var selectedFile = $("file").files[0]; var formData = new FormData(); formData.append("file", selectedFile); var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress", handleProgress, false); xhr.add ...

ajaxfileuploadinternet-explorer-8internet-explorer-9

Conceal or reveal buttons using JavaScript

I am struggling with a function that is supposed to hide certain buttons and create a new button. When I click on the newly created button, it should make the previously hidden buttons visible again. However, the function does not seem to work properly. ...

javascriptjqueryhtmlcss

What is the process to transfer data from JavaScript to HTML within a Laravel environment?

I am attempting to transfer a value from JavaScript to HTML as a variable. In order to do this, I am retrieving the value from a Laravel PHP controller. JavaScript $("ul.nav-tabs > li > a").click(function() { var id = $(this).attr("href").repla ...

javascripthtmllaravel

Implementing event handling for external modules using on method in Node.js

I have been utilizing the request module (available at https://www.npmjs.com/package/request) for executing a series of http requests in my application. However, I am currently facing an issue while attempting to integrate a logging feature into it. I am s ...

javascriptnode.jsevent-handlingdom-eventseventemitter

The Minimax algorithm experiencing issues in Next.js

I recently wrote some code in Next.js, but unfortunately, it's not functioning as expected. Despite my best efforts and attempts at utilizing alpha beta pruning, the code still fails to work properly. The issue lies in the fact that it simply returns ...

javascriptreactjsnext.jstic-tac-toeminimax

What are the benefits of adding member functions to the data structures of React.js store?

Using React.js and Typescript, I store plain Javascript objects in the React.js store. These objects are sometimes received from the server without any member functions, but I wish to add functions for better organization. Instead of having to rely on exte ...

javascriptjsonreactjstypescriptimmutability

Adding the highcharts-more.src.js file to an Angular 2 project: A step-by-step guide

I have linked highcharts-more to the system variable: 'highcharts-more': 'node_modules/highcharts/highcharts-more.src.js' But I keep getting an error message saying: Error in dev/process/templates/detail.template.html:40:33 ORIGINAL ...

javascripthighchartsangular

Ways to ensure the height of an element is consistent across various device modes

Testing out the angular-youtube-embed plugin with Chrome Dev tools' device mode, I wanted to see how the YouTube element would appear. Here's my code: <div class="fixed-header my-video"> <div style="padding:0px;"> <yo ...

javascriptcssangularjsyoutube-iframe-api

Why does the result of parsing in Python through Ajax PHP differ from what is displayed on the screen?

Attempting to extract search results from a specific page proved to be challenging. After selecting the date range of 20-Nov to 22-Nov and filtering by the "財經" news category on the website, only 47 results were visible. However, running python php cod ...

phppythonajaxmismatch