조건부로 송신 버튼을 무효로 하는 방법을 설명합니다.

조건부로 송신 버튼을 무효로 하는 방법을 설명합니다.

모든 필드가 필수 조건을 충족하지 못할 경우 Vuelidate 양식의 제출 버튼을 조건부로 비활성화하려면 어떻게 해야 합니까?

아래를 시도해 봤는데:disableddisabled라는 단어만 사용할 수 있습니다.

<form>
  <ol>
    <li class="inputQuestion" v-bind:class="{ 'error': $v.user.username.$error }">
      <label>Username:</label>
      <input v-model.trim="user.username" @input="$v.user.username.$touch()" />
    </li>
    <li class="inputQuestion" v-bind:class="{ 'error': $v.user.password.$error }">
      <label>Password:</label>
      <input v-model.trim="user.password" @input="$v.user.password.$touch()" />
    </li>

    <li class="submission">
      <button @click.prevent="submitForm" :disabled="$v.form.valid()">Sign In</button>
    </li>
  </ol>
</form>

현재 바인딩 중입니다.disabled에 의해 반환된 가치로$v.form.valid()컴포넌트의 템플릿이 렌더링될 때 한 번만 실행되며 이 시점 이후에도 변경되지 않습니다.

Vuelidate 매뉴얼을 보면$invalid다음과 같은 폼 모델의 속성:

지정된 모델의 유효성 검사 상태를 나타냅니다.옵션에 지정된 하위 검증자 중 하나가 거짓 값을 반환하면 true가 됩니다.검증 그룹의 경우 그룹화된 모든 검증자가 고려됩니다.

대신 이것을 사용하세요.

<button @click.prevent="submitForm" :disabled="$v.form.$invalid">

vuelidate를 사용하여 [Submit]버튼을 디세이블/이네이블로 하는 다른 방법은 다음과 같습니다.

<button @click.prevent="submitForm" :disabled="$v.$anyError">

언급URL : https://stackoverflow.com/questions/45693525/vuelidate-how-to-conditionally-disable-submit-button