What is Vue way to access to data from methods?

javascript vue.js methods

117,180

Solution 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); 
  }
}

Solution 2

It depends on how you call your postQuestionsContent method (if you call it asynchronously, you might need to bind the this context).

In most cases, you should be able to access it using this.$data.YOURPROPNAME, in your case this.$data.sendButtonDisable:

data: function ()  {
  return {
     questions: [],
     sendButtonDisable : false
  }

  },

  methods: 
  { 
     postQuestionsContent : function()
     {
        this.$data.sendButtonDisable = true;
     }
  }

Solution 3

Try this instead

...
methods: 
{ 
   postQuestionsContent ()
   {
      this.sendButtonDisable = true;
   }
}

Registering your methods in the above manner should resolve the issue.

117,180

Dmitry Bubnenkov

Updated on September 06, 2021

Comments

Dmitry Bubnenkov almost 3 years
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?
- Linus Borg over 8 years
  
  This should work without var this = that (in fact, the way you show it in your example is meaingless, you could leave it out). functions in the methods: object will be bound to the current instance. I assume you have left something out in your example - are you doing any AJAX calls and try to change the value inside a callback or something?
- The Oracle over 6 years
  
  In my case I have my method attached to an event listener on a button. I do not understand vuejs do any more.
The Oracle over 6 years

Some some reason this does not work. I think the community should review this issue.
nils over 6 years

Hi @TheOracle the question and aswer was valid in the realm of vue 0.x versions. 2.x should work normally without $data.
Blieque over 5 years

I'm getting this issue using 2.5.17. Might have to report it as a bug, but $data works.
grant zukowski over 5 years

this.$data.something is undefined. Better to use this.something
sunwarr10r over 5 years

Using Vue-cli 3.x I can NOT access properties inside data () from e.g. methods or computed with this.property or with this.$data.property. Is there another way?
A2D about 5 years

THIS answer is so useful for vue noobs (voobs?). The Vue 2 documentation even makes use of vm = this on the following page: vuejs.org/v2/guide/computed.html#Watchers But it would be easy to oversee this reading through the documentation.
andcl almost 5 years

It is not an issue at all. The correct way of accessing sendButtonDisable using this.$data is like this: this.$data[sendButtonDisable], because this.$data's array nature. Cheers.
Umair A. over 4 years

Can you explain what's going on here? Why does this work?
victorf over 4 years

up for "voobs"!
The Oracle about 4 years

Are you using Nuxtjs? @UmairA.
Connor about 4 years

@UmairA. From the Vue documentation: Note that you should <strong>not</strong> use an arrow function to define a method (e.g. plus: () => this.a++). The reason is arrow functions bind the parent context, so this will not be the Vue instance as you expect and this.a will be undefined. Here: vuejs.org/v2/api/#methods
Matianda almost 3 years

also note it will NOT work if we use Arrow function instead of Normal function in methods
Jesper Hustad almost 3 years

Note for people finding this: If you are using lambda notation this will not work, so instead use function(){}