Почему Реактивность с асинхронной функцией не работает.Проверка пользовательского поля [Vuejs] - PullRequest
Новая
       37

Почему Реактивность с асинхронной функцией не работает.Проверка пользовательского поля [Vuejs]

0 голосов
/ 14 февраля 2019

У нас есть код в html: 

<v-text-field
    label="Wyrażenie"
    v-model="formData.Expression"
    required
    @blur="v => checkExpression(v.target.value)"
    :rules="[isExpressionValid() || message]">
</v-text-field>

и в TypeScript: 

private isValid: boolean = false
private message: string = ''

private isExpressionValid(): boolean {
    return this.isValid
}

private async checkExpression(expression: string) {

    this.isValid = false
    if (this.isNullOrWhiteSpaces(expression)) {
        this.message = 'Wyrażenie nie może być puste'
        return
    }

    try {
        const response = await axios
            .get('/api/Priority/IsExpressionValid', {
                params: { expression: expression }
            })

        this.message = response.data.Message
        this.isValid = response.data.Data
    } catch (error) {
        this.$notify({
            type: 'error',
            text: getHttpErrorText(error),
            duration: 5000
        })
        this.message = 'error'
        this.isValid = false
    }
}

private isNullOrWhiteSpaces(str) {
    return str === null || str.match(/^\s*$/) !== null
}

Проблема связана с Reactivity for field message.В начале, когда поле получает какое-либо значение, например, "d", и мы покидаем его, приложение показывает:

введите описание изображения здесь

далее, когда мы вернемся к полюи оставьте его снова, только теперь приложение показывает желаемый результат:

введите описание изображения здесь

Кто-нибудь знает почему?Спасибо за ответы!

...