Access properties within the Vue instance itself
Within a Vue.js instance, the keyword “this” points to an instance of a vue.js object. Therefore, the “this” reserved word is used to access instance properties, appended to the name of the desired property:
|
1 |
this.nazivSvojstvaVueInstance |
It should be noted that certain vue instance properties are specific, because they have additional “background magic” going on. The data, methods, computed and watch properties act as a “proxy for the vue instance”, so all properties inside them are passed directly to the vue instance. Therefore, all child properties of these specified properties are represented as if they were direct properties of the Vue instance.
Example
Thanks to this “magic”, when targeting child properties within those specific properties, we access them as if they were “main” properties. So we don’t need to use “this.data.someProperty”, we can just use “this.someProperty”.
|
1 2 3 4 5 6 7 8 9 10 11 |
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }, methods: { ispisiPoruku : function () { console.log (this.message); } } }) |
In this example, instead of using the this.data.message expression, we use this.message as a completely legitimate way.
Problem cases when using “this” (for: data, methods, computed and watch)
a) Arrow function
Child properties within these “special” properties (data, methods, computed and watch), precisely because of the “magic” in the background, should not use the arrow function because it uses the lexical “this” ie. uses “this” from the parent environment, so it would return “undefined” in that case. You can read more about the arrow function in the article “Arrow function”
b) Closure
If the clousure function is called by an external function, then the “default rule” is used when determining the value of the keyword “this” (read more about this in the article “Meaning of the “this” operator in JavaScript”). For the aforementioned reason the “this” keyword in the closure points to a global object.
Example
In this example this.message does not return the expected value but “undefined” because the global object does not have a “message” property
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var app = new Vue({ el: "#app", data: { message: 'Message sent from closure!' }, methods: { ispisiPoruku : function () { function nekaClosure(){ return this.message; }; var a = nekaClosure() console.log(a); // Returnsundefined } } }) |
To solve this problem, we can use the well-known technique var self = this;, where we save the value this within the new variable of the closure function (closure always has access to this variable). Read more about this mechanism in the section “Mechanism self=this”
See the Pen Closure within Vue.js by Web programming (@chos) on CodePen.
Access properties outside the instance
Vue instance properties (as well as child properties and methods) can be used easilyaccessed outside the instance itself only after the vue instance is assigned to a variable. For external access to vue.js predefined properties, you need to use the prefix “$”.
Example
In this example, we access the vue instance from outside using the $ sign in front of the property name.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }, methods: { ispisiPoruku : function () { console.log (this.message); } } }) // Access outside the instance: console.log(app.$data.message); // Returns: Hello Vue! console.log(app.$el); // Returns: HTML element <div id="app">...</div> |
NOTE:
Since it is possible to have multiple Vue instances, using the mentioned syntax we can use imp properties from one instance in another. However, although it is possible to use this approach, it is still not recommended, because its application can quickly lead to code that is difficult to maintain. We should also not ignore the fact that Vue instances will no longer be isolated from each other, which can make it difficult to track dependencies between them, so changing something in one Vue instance can easily cause a problem in another.
Example
See the Pen
Instance Access by Web Programming (@chos)
on CodePen.