tanmay_das
668
3
Vue

Understanding the 'this' keyword inside Vue instance

Posted 2 years ago by tanmay_das

I have started to learn VueJS from scratch. I am following their official Guide. But I am stuck here: https://vuejs.org/v2/guide/#Handling-User-Input

In this example...

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

...how is it that the message property is directly being accessed without any reference to the data object? If this keyword refers to the current Vue instance, shouldn't the message property be accessed like this: this.data.message ?

({
  name: "John Doe",
  data: {
    message: "Hello World"
  },
  greet: function(){
    console.log("I am " + this.name);
    console.log("I have a message for you: " + this.data.message); //see here
  }
}).greet();

This is how I would have accessed a property in vanilla javascript

Please sign in or create an account to participate in this conversation.