Vue JS-在满足所有验证错误之前禁用按钮

Question

我有一个按钮，在满足所有验证要求之前，该按钮将被禁用。但是，只有当我第一次单击该按钮并允许显示验证错误时，该按钮才会被禁用。我希望我的按钮从一开始就被禁用，直到相应地输入所有输入。有人能帮忙吗？

表单组件

<template>
<div class="form-wrapper">
<form @submit.prevent="handleSubmit(sendFormData)" novalidate>
<slot name="form-content"/>
<slot name="button-submit" :is-invalid="isInvalid"/>
</form>
</div>
</template>

输入组件(仅显示该部分的按钮部分(：

<template #button-submit="{isInvalid}">
<button :disabled="isInvalid && !selectedTown"
:class="{'button-main-disabled': isInvalid && !selectedTown}"
type="submit"
class="button-main button-add">
School toevoegen
</button>
</template>

Answer 1

假设isInvalid是一个数据属性，将其初始化为true，并且只有在确认输入有效时才将其更改为false(在handleSubmit()中(：

export default {
data() {
return {
isInvalid: true 👈
}
},
methods: {
handleSubmit() {
// validate data...
this.isInvalid = false /* data is valid */
}
}
}

此外，您的disabled绑定看起来不正确。当表单指定无效状态AND时，当没有选择城镇时，它会禁用按钮，但我认为您打算使用OR条件(假设需要城镇选择(。

:disabled="isInvalid && !selectedTown" ❌
^^
:disabled="isInvalid || !selectedTown" ✅