programing

vuelidate에 sameAs를 사용하면 왜 작동하지 않는 거죠?

itsource 2022. 7. 2. 23:06
반응형

vuelidate에 sameAs를 사용하면 왜 작동하지 않는 거죠?

sameAs 메서드를 검증할 필드 이름을 찾을 수 없습니다.

동일(blabla)

blabla = 'internalFormData.password', 'internalFormData.password', 'this.internalFormData.password.value', 'password', 'password.value'

-----------script----------
data () {
  return {
     internalFormData: {
        password: '',
        repassword: ''
      }
   }
},


validations: {
      password: {
        value: {
          required,
          minLength: minLength(8)
        }
      },
      repassword: {
        value: {
          required,
          minLength: minLength(8),
          sameAs: sameAs('internalFormData.password')
        }
      }
    }
  },



---------------template--------------
<error
   v-if="!$v.internalFormData.repassword.value.sameAs"
>
  비밀번호가 일치하지 않습니다.
<error>

오류가 사라지지 않습니다.

당신의.validations오브젝트를 미러링해야 하는 구조data다음과 같이 해야 합니다.

validations: {
  internalFormData: {
    password: {
      required,
      minLength: minLength(8)
    },
    repassword: {
      required,
      minLength: minLength(8),
      sameAs: sameAs('internalFormData.password')
    }
  }
}

함수로 중첩된 속성을 지정해야 합니다.다음과 같이 합니다.

data(){return {
 password :{
  new: '',
  newRepeated:''
 }
}},    
validations : {
 password: {
  new : {required},
  newRepeated : {
   required,
   sameAs : sameAs( function(){return this.password.new} )
  }
 }
}

또한 이 닫힌 이슈도 살펴보시기 바랍니다.https://github.com/vuelidate/vuelidate/issues/252

언급URL : https://stackoverflow.com/questions/54731460/why-doesnt-it-work-when-sameas-is-used-in-vuelidate

반응형