Я получаю список данных из 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;
        });
    }
}

Кто-нибудь знает, в чем проблема?

0
Alex Schwifty 24 Ноя 2020 в 21:55

1 ответ

Лучший ответ

Таким способом нельзя присвоить значение произвольному индексу в пустом массиве. Вы должны либо полностью заменить массив значениями, которые гидратируют этот индекс, либо использовать $set.

Итак, резюмируем:

< Сильный > BAD

this.selectOptionTimes[instanceIndex] = response.data

< Сильный > ХОРОШО

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

Однако обратите внимание, что это имеет непредвиденные последствия. Если у вас есть пустой массив, и вы вызываете this.$set с индексом больше 0, массив будет заполнен пустыми значениями до вашего индекса.

Что может иметь больше смысла, так это использовать вместо {} вместе с this.$set и перебирать Object.keys напрямую вместо массива.

2
Ohgodwhy 24 Ноя 2020 в 19:08