Accessing properties from an instance using “this”

Accessing properties from an instance using “this”

Within the Vue.js instance, the keyword “this” indicates an instance of the vue.js object. Therefore, the reserved word “this” is used to access the instance properties, followed by the name of the desired property:

this.nameVueInstanceProperties

It should be noted that certain properties of the Vue instance are specific because they have extra “magic in the background“. The data, methods, computed, and watch properties act as “proxy for your instance,” so all the properties within them are passed directly to your instance. Therefore, all child properties of these properties are represented as direct properties of the Vue instance.

Example

Thanks to this “magic”, when targeting child properties within these specific properties, we approach them as if they were “main” properties. So we don’t have to use “this.data.someProperty“, but we can only use “this.someProperty“.

var app = new Vue ({
   el: '#app',
   data: {
     message: 'Hello Vue!'
   },
   methods: {
     printsMessage: function () {
        console.log (this.message);
     }
   }
})

In this example, instead of using this.data.message expression, we use this.message as a perfectly legitimate way.

Problematic cases when using “this”

a) Arrow function

Child properties within these “special” properties (data, methods, computed and watch), just because of the “magic” in the background, should not use the arrow function because it uses lexical “this“, ie uses “this” from the parent environment and in that case, it would return undefined.

b) Closure

If the closure function is called by an external function, then the “default rule” is used when determining the value of the keyword “this“. For this reason, the keyword “this” in closure indicates a global object.

Example

In this example, this.message does not return the expected value but “undefined” because the global object does not have the “message” property

var app = new Vue ({
   el: "#app",
   data: {
     message: 'Message sent from closure!'
   },
   methods: {
     printsMessage: function () {
        function letClosure () {
          return this.message;
        };
        var a = letClosure ()
        console.log (a); // Returns undefined
     }
   }
})

To solve this problem we can use the well-known technique var self = this; where within the new variable out closure function, we store the value this (closure always has access to this variable).

HTML

<div id="app">
        <p>{{printMessage()}}</p>
</div>

SCCS

#app {
    padding:1rem;
    width: 20rem;
    margin:0 auto;
}

Babel

var app = new Vue ({
     el: "#app",
     data: {
       message: 'Message sent from closure!'
     },
     methods: {
       printsMessage: function () {
         var self = this.message;
         function letClosure () {
           return self;
         };
         var a = letClosure ()
         return a;
       }
     }
})

Access to non-instance properties

Vue instance properties (as well as child properties and methods) can be easily accessed outside the instance itself only after the Vue instance is assigned to a variable. External access to vue.js with predefined properties requires the use of the prefix “$”.

Instance Properties:

Instance methods:

a) Data related methods

b) Event-related methods

c) Methods related to Lifcycyle

Example

In this example, we access the vue instance outside it using the $ character in front of the property name.

var app = new Vue ({
   el: '#app',
   data: {
     message: 'Hello Vue!'
   },
   methods: {
     printsMessage: function () {
        console.log (this.message);
     }
   }
})
 
// Access out of instance:
console.log (app. $ data.message); // Returns: Hello Vue!
console.log (app. $ el); // Returns: HTML element <div id = "app"> ... </div>

REMARK:
Since there are multiple Vue instances, we can use the properties from one instance to another using the above syntax. However, while it is possible to use this approach, it is not recommended, since its implementation can quickly lead to difficult to maintain code. Also, the fact that Vue instances will no longer be isolated from one another should not be overlooked, which can make it difficult to track the dependency between them, so changing something in one Vue instance can easily make it a problem for another.

Leave a Reply

Your email address will not be published. Required fields are marked *