Currently, I am in the process of learning Javascript and vue.js. I am encountering some confusion when it comes to accessing member variables of an internal object within an object in Vue.js, as it differs from traditional Javascript.
Consider the JavaScript object below:
let obj = {
name : 'n',
ob : {
c : 'char',
d : 'int'
},
printcd : function()
{
console.log(this.ob.c);
console.log(this.ob.d);
}
}
In this example, we access 'c' and 'd' through the 'ob' property (as in this.ob.c). However, when we look at the equivalent code in Vue.js:
ap = new Vue(
{
el: "#app",
data:
{
name:
{
first: 'First',
last:'Last',
age: 30
}
},
computed:
{
getName: function() {
return this.name.first + ' ' + this.name.last;
}
}
}
Here, inside the 'getName()' method, we are accessing 'first' and 'last' directly without using 'data'. Instead of using 'this.data.name.first', we simply use 'this.name.first'. If anyone could explain why the mechanism for accessing properties is different in Vue.js, I would greatly appreciate it.