Question

我们在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
}

问题在于消息的反应性字段。在开始时，field获得一些价值，例如“ d”，我们从该应用程序中删除：

enter image description here

下一步，当我们返回该字段并再次离开时，只有现在该应用程序显示所需的结果：

enter image description here

有人知道为什么吗？感谢您的回答！

为什么使用异步功能的反应性不起作用。自定义字段验证[Vuejs]

0 个答案: