How can I update Vue immediately after an axios call?

Question

I need to update my variable this.xCtesPorRuta immediately after an axios call so I can show some info from the database on an element like a select. The axios call is activated with a button's v-on:click event.

I am storing the axios response on the variable, but it doesn't change immediately, it does so only when another element is clicked. I'm trying to force the update with nexttick but with no success.

First attempt:

var request = {rutas:this.xRutasSeleccionadas , tipos:this.xTipos}
axios.post('/querys/', request).then(response => this.xCtesPorRuta = response.data)

this.$nextTick(function() {
  this.$forceUpdate();
});

I know Vue has issues updating arrays instantly, but I've manage before to force an array change by using the splice method, followed by the nextTick/forceUpdate hack. Never after an axios call though.

EDIT: I was using this incorrectly here. Thanks to @Demonyowh and @fracz for the help on that part.

Second attempt. The result is the same as the first attemp:

var myVar = this;
var request = {rutas:this.xRutasSeleccionadas , tipos:this.xTipos}
axios.post('/querys/', request).then(function (response) {
  myVar.xCtesPorRuta = [];
  for (var i=0; i<response.data.length; i++) {
    myVar.xCtesPorRuta.splice(i, 1, response.data[i]);
  }
})

this.$nextTick(function() {
  this.$forceUpdate();
});

Turns out using splice didn't help this time.

https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work — fracz, May 26 '17 at 06:49
Thank you, I made the respective change to my code and edited the question fixing the `this` issue. — Adocad, May 26 '17 at 10:24
1. You can avoid creating another variable by using arrow `=>` function which won't bound your `this` scoping. 2. You should `catch` the response unless using library which will notice for such unhandled rejection. 3. Your `$nextTick` call is called just before you get the response, why? [async vs sync](https://stackoverflow.com/questions/16336367/what-is-the-difference-between-synchronous-and-asynchronous-programming-in-node) — Chay22, May 26 '17 at 11:34
1. I don't know how to implement that. 2. I'm catching the function now as you said but I get no errors. I also added `console.log(response)` inside `.then` and I can see the data is returned correctly, it just doesn't update the vue variable instantly. 3. The `$nextTick` call is actually called **after** the response, I'm not sure I follow here. — Adocad, May 26 '17 at 11:56

score 2 · Answer 1 · answered May 26 '17 at 06:17

2

this is because this does not refer to the object before .. it refers to the axios.post since it was inside it .. what you can do is

var myVar = this;
var request = {rutas:this.xRutasSeleccionadas , tipos:this.xTipos}
axios.post('/querys/', request).then(function (response) {
    myVar.xCtesPorRuta = [];
    for (var i=0; i<response.data.length; i++) {
        myVar.xCtesPorRuta.splice(i, 1, response.data[i]);
    }
})

answered May 26 '17 at 06:17

Demonyowh

1,563
1
8
14

Thank you for that, I made the respective change to my code and edited that part on the question. – Adocad May 26 '17 at 10:22

score 0 · Accepted Answer · answered May 26 '17 at 12:17

The variable gets updated immediately now!

The "solution" was to actually use the data on the select I needed it on:

<select multiple class="form-control">
  <option v-for="cliente in xCtesPorRuta">@{{ cliente }}
  </option>
</select>

I was evaluating the values on the vue-devtools before visually showing them on the page. I wasn't moving forward cause I just thought it wouldn't work u.u.

How can I update Vue immediately after an axios call?

2 Answers2