亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在 axios 請求后修復 vuejs 中的值更新延遲?

如何在 axios 請求后修復 vuejs 中的值更新延遲?

largeQ 2023-06-15 17:26:33
我正在從 api 檢索數據列表,需要填充特定<select></select>標簽,這些標簽與幾個單選按鈕相關聯,其中一些數據為<options></options>. 單選按鈕等待事件 ( @change/ @click) 并執行和 axios get 請求。一切正常。我單擊單選按鈕并檢索數據作為響應(vue 工具也顯示正確的數據)但標簽<option></option>沒有更新?,F在,當我單擊另一個單選按鈕時,我再次從 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;        });    }}有人知道這里的問題是什么嗎?
查看完整描述

1 回答

?
萬千封印

TA貢獻1891條經驗 獲得超3個贊

您不能以這種方式將值分配給空數組中的任意索引。您必須將 Array 完全替換為包含該索引的值,或者您必須使用$set.

所以,回顧一下:

壞的

this.selectOptionTimes[instanceIndex]?=?response.data

好的

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

但請注意,這會產生意想不到的后果。如果您有一個空數組,并調用this.$set大于 0 的索引,則該數組將填充空值直到您的索引。

可能更有意義的是使用{}insteadthis.$set以及直接遍歷Object.keysinstead 而不是數組。

  • 小提琴在索引上顯示 $set 為空數組

  • 小提琴改為顯示對象用法


查看完整回答
反對 回復 2023-06-15
  • 1 回答
  • 0 關注
  • 173 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號