What is Vue way to access to data from methods?

Question

I have the following code:

{   data: function ()  {     return {       questions: [],       sendButtonDisable: false,     }   },    methods: {      postQuestionsContent: function () {       var that = this;       that.sendButtonDisable = true;     },   }, }, 

I need to change sendButtonDisable to true when postQuestionsContent() is called. I found only one way to do this; with var that = this;.

Is there a better solution?

Answer 1

Inside methods if you don't have another scope defined inside, you can access your data like that:

this.sendButtonDisable = true;  

but if you have a scope inside the function then in vue is a common usage of a variable called vm (stands for view model) at the beginning of the function, and then just use it everywhere like:

vm.sendButtonDisable = false; 

An example of vm can be seen in the Vue official documentation as well.

complete example:

data: function ()  {   return {      questions: [],      sendButtonDisable : false   } },  methods: {    postQuestionsContent : function() {     // This works here.     this.sendButtonDisable = true;      // The view model.     var vm = this;      setTimeout(function() {       // This does not work, you need the outside context view model.       //this.sendButtonDisable = true;        // This works, since wm refers to your view model.       vm.sendButtonDisable = true;     }, 1000);    } }