如何在 axios 调用后立即更新 Vue？

Question

我需要在 axios 调用后立即更新我的变量 this.xCtesPorRuta 以便我可以在 select 等元素上显示数据库中的一些信息. axios 调用通过按钮的 v-on:click 事件激活。

我将 axios 响应存储在变量上，但它不会立即更改，只有在单击另一个元素时才会更改。我正在尝试使用 nexttick 强制更新但没有成功。

第一次尝试：

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

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

我知道 Vue 在立即更新数组时遇到问题，但我之前设法通过使用 splice 方法强制更改数组，然后是 nextTick/forceUpdate hack。但是从来没有在 axios 调用之后。

编辑：我在这里错误地使用了 this。感谢@Demonyowh 和@fracz 在这方面的帮助。

第二次尝试。结果与第一次尝试相同：

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

原来使用 splice 这次没有帮助。

Answer 1

这是因为 this 没有引用之前的对象.. 它引用了 axios.post 因为它在里面.. 你可以做的是

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

Answer 2

变量立即更新！

"solution" 是实际使用 select 上的数据我需要它：

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

我在 vue-devtools 上评估值，然后在页面上直观地显示它们。我没有继续前进，因为我只是认为它行不通 u.u。

如何在 axios 调用后立即更新 Vue？

How can I update Vue immediately after an axios call?

javascript

laravel

vue.js

axios

vuejs2