如何在 axios 请求后修复 vuejs 中的值更新延迟？答案

【问题标题】：How to fix value update delay in vuejs after axios request?如何在 axios 请求后修复 vuejs 中的值更新延迟？
【发布时间】：2021-03-07 14:56:33
【问题描述】：

我正在从 api 检索数据列表，需要填写特定的 <select></select> 标签，这些标签与一些单选按钮相关联，其中一些数据为 <options></options>。等待事件 (@change/@click) 并执行和 axios 获取请求的单选按钮。一切正常。我单击一个单选按钮并检索数据作为响应（vue 工具也显示正确的数据）但 <option></option> 标签没有更新。现在，当我单击另一个单选按钮时，我再次从 api 获取正确的数据，但现在 <option></option> 标签正在刷新上一个响应中的数据。

模板

<!-- CREATING 7 RADIO BUTTONS FOR THE CURRENT WEEK FROM MON-SUN -->
<div class="wrapper" v-for="item in inputDetails">
    <input :id="'datetime[0]['+item.labelText+']'" type="radio" name="datetime[0][date]" v-model="formData.datetime[0].date" :value="item.inputValue" @change="getTimes" />
</div>

<!-- CREATING THE TIME PICKER -->
<select id="datetime[0][time]" name="datetime[0][time]" v-model="formData.datetime[0].time">
    <option selected="selected"></option>
    <option v-for="item in selectOptionTimes[0]" :value="item.value">{{ item.label }}</option>
</select>

<!-- 
2 MORE RADIO BUTTON SECTION AND TIME PICKER SECTIONS WITH DIFFERENT INDEXES
<input id="datetime[1][time]"... 
-->

脚本

data() {
    return {
        formData: {
            datetime: [
                {date: '', time: ''},
                {date: '', time: ''},
                {date: '', time: ''},
            ]
        }
        selectOptionTimes: [],
    }
},
methods: {
    getTimes: function (current) {
        let instanceIndex = current.currentTarget.id.match(/(?<=\[)([0-9])(?=])/g)[0]; // getting the index of the current datetime section
        axios.get('/api-url', {
            params: {
                location_id: this.formData.location_id,
                date: current.currentTarget.value
            }
        }).then(response => {
            this.selectOptionTimes[instanceIndex] = response.data;
        });
    }
}

有人知道这里有什么问题吗？

【问题讨论】：

我认为你需要一个 v-for 元素的 :key 绑定
试过了，并没有解决问题。

标签： javascript html vue.js axios

【解决方案1】：

您不能以这种方式将值分配给空数组中的任意索引。您必须将数组完全替换为包含该索引的值，或者您必须使用$set。

所以，回顾一下：

不好

this.selectOptionTimes[instanceIndex] = response.data

好

this.$set(this.selectOptionTimes, instanceIndex, response.data)

但请注意，这会产生意想不到的后果。如果您有一个空数组，并在大于 0 的索引上调用 this.$set，则该数组将填充直到您的索引为止的空值。

可能更有意义的是使用 {} 和 this.$set 并循环遍历 Object.keys 而不是直接数组。

【讨论】：

像魅力一样工作。谢谢！