Двусторонняя привязка данных не работает после XHR - PullRequest
Новая
       45

Двусторонняя привязка данных не работает после XHR

1 голос
/ 07 апреля 2020

Я наблюдаю свойство из vuex так: 

computed: {
    ticket() {
        return this.$store.getters['order/reservation'].offer_id
    }
},
watch: {
    ticket(newTicketId) {
        console.log('Caught change of ticket in InputDate', newTicketId)
        this.getAvailableDates(newTicketId)
    }
},

при его изменении я выполняю getAvailableDates (). Этот метод просто выполняет http-запрос, используя модуль ax ios: 

    async getAvailableDates(id) {
        try {
            const response = await this.$axios.$get(
                `/valid_days?offer_id=${id}`
            )
            this.$set(this, 'availableDates', response)
            console.log('this.availableDates', this.availableDates) // works fine showing 30 length array
        } catch (e) {
            console.error('Error getting valid_days', e)
        }
    }
},

(я использую nuxt)

, как вы можете видеть, я уже пытаюсь установить его, используя $ установить метод из vue экземпляра. Ранее я также пытался просто this.availableDates = response и this.$set(this.data, 'availableDates', response).

Строка, где я console.log ответ от API работает нормально, и в консоли я вижу массив отлично:

enter image description here

но в vue массив devtools пуст:

enter image description here

и в шаблоне, где я делаю : 

availableDates: {{ availableDates }}

также не обновляется

enter image description here

Никогда не было ничего подобного во время моего двухлетнего путешествия с Vue. this. $ set всегда работал, когда у меня были проблемы с реактивностью. Кто-нибудь понял, в чем может быть причина?

1 Ответ

0 голосов
/ 07 апреля 2020

Я не уверен, отличается ли он для nuxt, но в документах Vue для $ set есть предупреждение

Vue -set

Предупреждение :

Целевым объектом не может быть экземпляр Vue или объект данных root экземпляра Vue.

Как прокомментировал Буссаджра Брахим, вы могли бы используйте 

this.availableDates= response

, если availableDates уже является существующим свойством данных. $ set следует использовать только при добавлении новых свойств к объекту, и нужно поддерживать реактивность.

...