vm.property compared to this.property

Question

vm.property compared to this.property

Although it may seem like a simple question, I am in need of some clarification. Currently, I have vuejs running on a single page of my website. The vm app is running in the footer script of the page without utilizing an app.js file or templates/components.

When inside one of my vue methods, everything works perfectly fine:

newContainer(){
   this.attribute = 'value'; //this works!
}

However, when using axios and within its functions, I noticed that I have to approach it differently:

axios.post('my/route', {
        attribute: this.attribute //this works
    }).then(function (response) {
        vm.attribute = 'value'; //this works
        this.attribute = 'value'; //this does not work
    });

I understand that this issue could possibly be due to it being within a function where this.attribute does not work while vm.attribute does work. My question is why does this happen and if there is a better way to handle it?

javascript vue.js vuejs2

Answer 1

Answer №1

Upon executing the code snippet provided, you will be able to view the following outcomes:

export default{
    data(){
        return{
            title:"Form Register",
            formdata:{},
            message:"",
            success:0,
        }
    },
    methods:{
       register(){
            this.axios.post("http://localhost:8888/form-register",this.formdata).then((response) => {
                   console.log(response);
                   if(response.data.success>0){
                       this.message="You register success";
                       this.success=response.data.success;
                   }
                   else{
                       this.message="Register to failed";
                       this.success=response.data.success;
                   }
              });
                
        },

    }
}

Answer 2

Upon executing the code snippet provided, you will be able to view the following outcomes:

export default{
    data(){
        return{
            title:"Form Register",
            formdata:{},
            message:"",
            success:0,
        }
    },
    methods:{
       register(){
            this.axios.post("http://localhost:8888/form-register",this.formdata).then((response) => {
                   console.log(response);
                   if(response.data.success>0){
                       this.message="You register success";
                       this.success=response.data.success;
                   }
                   else{
                       this.message="Register to failed";
                       this.success=response.data.success;
                   }
              });
                
        },

    }
}

Answer 3

Answer №2

When utilizing arrow functions such as () => {...}, the current context is bound. This means that this will correctly refer to the intended context. Therefore, using arrow functions instead of function() {...} in cases where the context is not explicitly bound will result in proper functionality.

For example:

.then(response => {this.attribute = 'value'}

Answer 4

When utilizing arrow functions such as () => {...}, the current context is bound. This means that this will correctly refer to the intended context. Therefore, using arrow functions instead of function() {...} in cases where the context is not explicitly bound will result in proper functionality.

For example:

.then(response => {this.attribute = 'value'}

Answer 5

Answer №3

Developers often face a common stumbling block when working with axios functions. The issue arises because the code inside an axios function is out of scope of the object containing the axios method call. This can be better understood by comparing the original code block to the revised version below:

 var vm = {
      function doWork(){
        axios.post('my/route', {
              attribute: this.attribute //this works
        }).then(function (response) {
              vm.attribute = 'value'; //this works
              this.attribute = 'value'; //this does not work
         });
      }
 }

This rewritten version is essentially equivalent to:

 var vm = {
      function doWork(){
          axios.post('my/route', {
                attribute: this.attribute //this works
           }).then(followOnWork(response));
      }
 }

 function followOnWork(response){
      vm.attribute = 'value'; //this works
      this.attribute = 'value'; //this does not work
 }

In the refactored code, it's evident that followOnWork runs independently of the vm object. Therefore, any reference to a this variable in followOnWork does not correspond to the vm object. On the other hand, vm represents the actual name of the object and can be accessed from anywhere using the vm variable once the object is created.

To address this "out of scope" issue, you can utilize an arrow function (as suggested by @MakarovSergey) if ES6 is compatible with your setup.

Answer 6

Developers often face a common stumbling block when working with axios functions. The issue arises because the code inside an axios function is out of scope of the object containing the axios method call. This can be better understood by comparing the original code block to the revised version below:

 var vm = {
      function doWork(){
        axios.post('my/route', {
              attribute: this.attribute //this works
        }).then(function (response) {
              vm.attribute = 'value'; //this works
              this.attribute = 'value'; //this does not work
         });
      }
 }

This rewritten version is essentially equivalent to:

 var vm = {
      function doWork(){
          axios.post('my/route', {
                attribute: this.attribute //this works
           }).then(followOnWork(response));
      }
 }

 function followOnWork(response){
      vm.attribute = 'value'; //this works
      this.attribute = 'value'; //this does not work
 }

In the refactored code, it's evident that followOnWork runs independently of the vm object. Therefore, any reference to a this variable in followOnWork does not correspond to the vm object. On the other hand, vm represents the actual name of the object and can be accessed from anywhere using the vm variable once the object is created.

To address this "out of scope" issue, you can utilize an arrow function (as suggested by @MakarovSergey) if ES6 is compatible with your setup.

vm.property compared to this.property

Answer №1

Answer №2

Answer №3

Similar questions

How can one achieve the equivalent of Flask Safe when making an ajax call?

The issues of cross-origin domains arise when utilizing iframes with src links originating from the server side

Retrieving PHP variable within a JavaScript file

Tips for hiding a popover in Angular when clicking outside of it

Utilizing the HTML button element within an ASP file combined with JavaScript can lead to the reloading of the

Looking for a way to sort through data using the current time as a filter

What is the best way to organize components in Vue.js?

Pressing "Enter" initiates the submission of the form

An unexpected runtime error occurred due to a SyntaxError: the JSON input abruptly ended during the authentication process with the next-auth module

Guide on integrating AJAX with servlets and JSP for database-driven applications

In JavaScript, when using the fetch function with JSON, it is possible to skip the

Customize Vuetify theme colors with your own unique color palette

A comprehensive guide on how to find keywords within an array and then proceed to make all text within the parent div tag stand

Troubleshooting issues with JavaScript events in order to effectively implement popovers

Execute a multer request to upload an image (using javascript and express)

How can I fix the 'Null is not an object' error that occurs while trying to assess the RNRandomBytes.seed function?

How can I retrieve variables from App.vue and use them in other components within Vue?

Experiencing a 400 error while transitioning from ajax to $http?

After the installation of Windows 10 and the latest version of NodeJS, Gatsby seems to be

A guide to incorporating a textview into a React application using the Google Maps API