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

Question

我正在从 api 检索数据列表，需要填充特定<select></select>标签，这些标签与几个单选按钮相关联，其中一些数据为<options></options>. 单选按钮等待事件 ( @change/ @click) 并执行和 axios get 请求。一切正常。我单击单选按钮并检索数据作为响应（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;        });    }}有人知道这里的问题是什么吗？

Answer 1

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

所以，回顾一下：

坏的

this.selectOptionTimes[instanceIndex] = response.data

好的

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

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

可能更有意义的是使用{}insteadthis.$set以及直接遍历Object.keysinstead 而不是数组。

• 小提琴在索引上显示 $set 为空数组

• 小提琴改为显示对象用法