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

Integrate CSS and JavaScript files into Node Express

Tips for applying multiple style properties to an element using JavaScript

The issue of AFrame content failing to display on Google Chrome when used with hyperHTML

How can we integrate fixed-data-table-2 sorting with an existing redux store?

What is the process for setting up a vertical carousel in Bootstrap 5 with a stationary previous image?

Exploring the properties of a file directory

dc.js bar graph bars blending together

including a personalized class to the div container

Instead of using a hardcoded value, opt for event.target.name when updating the state in a nested array

In need of changing the date format post splitting

What is the best way to include an API key in the response to an Angular client application?

Tips on retrieving the text content of an HTML element using its tag

Guide to comparing the contents of two text fields and highlighting the altered characters using ReactJS

What are the best ways to prioritize custom events over ng-click events?

Supplier for a module relying on data received from the server

Is it possible to manipulate a parent component's state with a child component?

Transforming a plain text field into an input field upon clicking a button or icon using Angular/Typescript

Access the CSV file using Office365 Excel via a scripting tool

What is the best method for ensuring image orientation is displayed correctly?

Organizing checkboxes to store selected values in an array using Vue.js