Question

我需要在axios调用后立即更新我的变量 this.xCtesPorRuta ，这样我就可以在像select这样的元素上显示数据库中的一些信息。使用按钮的v-on：click事件激活axios呼叫。

我将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

变量现在立即更新！

“解决方案”是实际使用我需要的选择数据：

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

我正在评估vue-devtools上的值，然后在页面上直观地显示它们。我没有前进因为我只是觉得它不会起作用。

如何在axios呼叫后立即更新Vue？

2 个答案: