Javascript Vue JS-在遇到所有验证错误之前禁用按钮

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

表单组件

<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>

输入组件（仅显示此部件的按钮部分）：

托沃根学校

假设

isInvalid

是一个数据属性，将其初始化为

true

，只有在确认输入有效时（在

handleSubmit（）

中），才将其更改为

false

：

导出默认值{
数据（）{
返回{
isInvalid：真正使用isInvalid作为每次数据更改时的计算值。isInvalid属性将更新
<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>