Utilizing Axios in Vue.js to extract tokens from a URL and initiate a POST request

Recently, I've been working on extracting a token from a URL like

http://test.com/confirm?token=MMsndiwhjidh...
and then sending a post request to another server.

This is the approach I took:

export default {
    data() {
        return {
            confirmation : false,
            somethingWrong: false       
        }
    },
    
    created: function() {
        axios.post('/confirm', null, {
            method: 'post',
            params: {
                token:this.$route.query.token
            }
        })
        .then(function(res) {
            console.log(res)
            this.confirmation = true       
        })
        .catch(function(error) {
            console.log(error)
            this.somethingWrong = true
        })
    }
}

During testing, I encountered the following errors:

https://i.sstatic.net/vRaKK.png

https://i.sstatic.net/vRaKK.png

It seems that there might be an issue with how I am extracting the token.

Answer №1

The issue stems from your usage of declarative functions instead of arrow functions in the then / catch blocks. The reference to `this` does not point to the Vue component in this context.

To resolve this, consider using the following syntax:

.then((res) => {
    console.log(res)
    this.confirmation = true       
})

For a more detailed explanation on the distinction between regular and arrow functions, I recommend reading an article like this one.

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

Issues with Rails comments not displaying properly when using ajax requests

I've implemented ajax comments in my rails app and while I can see the comments are being processed in the console, they're not displaying/rendering on the page. My javascript appears to be functioning correctly, but I'm unsure where the iss ...

Guide to automatically inserting text into an html form and submitting it without manual intervention

Currently, I am in the process of a project where my main goal is to design an HTML form for submitting replies. One interesting feature I want to include is an option for users who are feeling lazy to simply click on "auto-generate comment", which will ...

JQuery could not retrieve the property 'json' from an undefined or null reference

Currently, I am in the process of developing a Windows 8 app using HTML and accessing data from an API. Unfortunately, I keep encountering an error: 0x800a138f - JavaScript runtime error: Unable to get property 'json' of undefined or null refer ...

I require my two elements to possess opposing transformations in their coordinates or directions to enable dragging capabilities

Changing the code to move the elements in opposite directions is my goal. I attempted multiplying the second element by -1, but unfortunately, I keep ending up with a NAN or undefined result. Any suggestions on how to achieve the desired effect? ...

Tips for documenting curried functions using Js docs

I'm encountering issues while trying to use Js docs for generating static documentation of my project. When attempting to run the js doc command, I am faced with numerous parse errors specifically in areas where I have curried functions. Strangely, my ...

What is the process for implementing a dynamically generated template in a Vue.js instance?

Using a static template with a Vue.js instance is straightforward. The firstPlaceholder content gets replaced by the staticTemplate, and the text property renders correctly. However, creating a dynamic template poses rendering issues. The secondPlaceholde ...

Adjust the position of the object in relation to its current orientation

I am facing a challenge in moving an object upwards in relation to its current direction. I am working with a CubeGeometry that has a specific height, and my goal is to place an object at the top of it and have it rotate along with the cube. Simply adding ...

Can you explain the distinction between res.render() and ejs.render() when used in a Node.js and Express application?

Incorporating the EJS template engine into my Node.js and Express application has been seamless so far, with no issues encountered. I have been utilizing its functionality and rendering capabilities consistently. However, I have noticed that I typically u ...

Protecting your Single Page Application with a CSRF token

Utilizing Vue js for the SPA and Laravel for the backend has been smooth so far, but after submitting a form, I've encountered an issue with the csrf token not refreshing. As a result, whenever I attempt to submit another form, it triggers a TokenMism ...

Troubleshooting the pushstate back function in HTML5 and jQuery

In my code, I have implemented an ajax call to load content dynamically. I am now looking to add a deeplinking effect, and after researching, I discovered that only raw coding can achieve this. Here is what I have implemented so far: jQuery("#sw_layered_c ...

What is the best way to integrate custom JavaScript files into a Vue project?

I recently downloaded an HTML template from a website and now I am looking to convert the entire template into a Vue CLI project. The template includes jQuery and other custom JavaScript files. While I was able to use npm packages for jQuery and Bootstrap, ...

Scraping a dynamic data source using Puppeteer in JavaScript

I'm struggling to extract HTML data from a variable that stores HTML content. I have added my notes, marked with " << ". Unfortunately, the evaluate function only seems to work on a page and not within a div. Can anyone suggest a way for me to sc ...

MongoDB Stitch retrieves all data fields

Can anyone help me with my MongoDB query issue? I've recently started working with mongoDB and I'm having trouble getting just one field back for all my documents. var docs = db.collection("articles").find({}, { _id: 0, title:1}).asArray(); De ...

How can AngularJS catch the HTML element and data responsible for triggering an error handled by $exceptionHandler?

My application is equipped with a functional $exceptionHandler. It effectively captures angularJS errors and sends the error data to my email for analysis. However, there seems to be an issue where it fails to capture the HTML element responsible for trigg ...

Use AJAX to send the form instead of using the action attribute

Struggling to get a form to submit using ajax instead of an action attribute, but so far, nothing seems to be working. The PHP script functions correctly when tested with an action submit. I've researched examples, read documentation, asked questions ...

Tips for dynamically styling a Styled Component with all the CSS housed in an external file

My goal is to dynamically render a Styled Component. In the past, it was simple because all styling was contained within the component itself. However, I now strive to maintain a separation of concerns by storing the CSS in an external file. While this app ...

Properly aligning text with checkboxes using HTML/CSS and tags like <span> or <div>

My goal is to have the text displayed as a block in alignment with the checkbox, adjusting based on the sidebar's width. For reference: Current Layout Preferred Layout I have shared the code on CodePen (taking into account screen resolution and wi ...

Can we use an open-ended peer version dependency in package.json?

Question Summary Is it necessary for me to specify the peer dependency of @angular/core in my package.json file for a package containing easing functions that work with any version of Angular? "peerDependencies": { "@angular/core": "x.x" } Context I ...

Displaying parent component when URL changes in Vue Router for child components

Currently, I am delving into the world of Vue and encountering an issue with nested routers. Despite defining some child routers in the routes, whenever I access the child route, the parent component continues to be displayed. Below is the snippet of my co ...

"Encountering a bug when attempting to load Google Maps while hiding it

I encountered a bug while setting up a google map on a hidden tab. The map is scrollable and zoomable, but it doesn't extend across the entire canvas - leaving the rest of the canvas in grey. Using the jQuery Map Extension (http://code.google.com/p/j ...