如何在 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 为空数组小提琴改为显示对象用法