data does not update in vue js

Question

i have a simple form like so

<form @submit.prevent="getSummary">
    <input type="text" v-model="userAcccount" placeholder="Enter Account 
    Number">
    <button type="submit" class="btn btn-xs btn-default">Submit</button>
</form>

and the getSummary method in my methods object in vue is like this

methods: {
        getSummary () {               
            axios.get('core/handle.php', {
                params: {
                  accountNumber: this.userAcccount
                }
              })
              .then(function (response) {
                this.userData = response.data;
                console.log(this.userData);
              })
              .catch(function (error) {
                alert(error);
            });
        }
    }

my data object contains

data: {
        userAcccount: '',
        userData: []
    },

i am trying to update the userData with the response from axios and then use it to populate a table for testing purposes i just tried this

<span v-if="userData.length > 0">
      some data 
</span>
<span v-else>
      data not found
</span>

console.log shows me the userData has be updated but this bit of code above doesn't change.

what console.log(response) print in your console ?

Saurabh Mistry
– Saurabh Mistry

2018-01-19 07:49:00 +00:00
Commented Jan 19, 2018 at 7:49 — Saurabh Mistry
– Saurabh Mistry, Commented Jan 19, 2018 at 7:49

connexo · Accepted Answer · 2018-01-19 08:06:30Z

You have no access to the VM via this inside your then function. You have three ways to fix this:

Explicitly bind the outer this as execution context to the function (ES5 functions have their own this):

.then(function (response) {
    this.userData = response.data; 
    console.log(this.userData);
}.bind(this))

Store the this context in a local variable e.g. self or that:

getSummary () {
  const self = this;
  axios.get('core/handle.php', {
    params: {
      accountNumber: this_.userAcccount
    }
  })
  .then(function (response) {
    self.userData = response.data;
    console.log(self.userData);
  })
  .catch(function (error) {
    alert(error);
  });
}

Use ES6 arrow functions which don't have their own this:

.then(response => {
  this.userData = response.data;
  console.log(this.userData);
})

The concept of this in Javascript differs alot from many other programming languages as it describes the execution context of a function. It is not an easy-to-grab concept, but this helped me get into it:

http://javascriptissexy.com/understand-javascripts-this-with-clarity-and-master-it/

For reference, MDN is always a good place to go:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

thanks alot for the help the third option worked. i try to understand the other options and see how to use them.
You're welcome. This is one of the trickiest things to overcome when learning Javascript in more depth.
i dose not work for me, axios.get(url).then(response => { this.items = response.data.response; }); but it not work and this.items is empty.

sundeqvist · Accepted Answer · 2018-01-31 09:32:36Z

5

Using ES6 arrow functions you can access the response in the callback by rewriting slightly, like so:

.then(response => {
    this.userData = response.data;
    console.log(this.userData);
})

This is because you are currently reaching the axios request context with this, which obviously is null as userData isn't in your scope. By using the arrow function syntax you get access to the parent component where userData resides.

edited Jan 31, 2018 at 9:32

answered Jan 19, 2018 at 8:10

sundeqvist

17110 bronze badges

Comments

haMzox · Accepted Answer · 2018-01-19 07:49:52Z

Save the Context of this and you are good to go.

methods: {
        getSummary () {
           var this_= this;
            axios.get('core/handle.php', {
                params: {
                  accountNumber: this_.userAcccount
                }
              })
              .then(function (response) {
                this_.userData = response.data;
                console.log(this_.userData);
              })
              .catch(function (error) {
                alert(error);
            });
        }
    }

If that doesn't work, add this_.$forceUpdate(); to your response function after this_.userData = response.data, it will always work ;)

when you say "Save the Context of this and you are good to go." what do you mean

Collectives™ on Stack Overflow

data does not update in vue js

3 Answers 3

3 Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Related