VUE : Vuelidate between.스토어 값에서 최대값을 사용하시겠습니까?

VUE : Vuelidate between.스토어 값에서 최대값을 사용하시겠습니까?

양식 입력을 검증하기 위해 VUE와 Vuelidate를 사용하고 있습니다.이 경우...mapGetters를 통해 스토어에서 데이터를 가져오는 모달 팝업입니다.

static 값을 다음과 같이 설정하면 동작합니다.

validations: {
        refundAmount: {
            between: between(0, 40)
        }
    },

그러나 다음과 같은 스토어의 값을 사용할 경우 값에 대해 매핑되지 않습니다.

validations: {
        refundAmount: {
            between: between(0, this.selectedOrder ? this.selectedOrder.totalprice : 0)
        }
    },

내 추측으로는...이.selectedOrder.totalprice는 vuelidate 컴포넌트가 필요로 하기 전에 존재하지 않습니다.실제로 이 컴포넌트를 어떻게 처리해야 할지 잘 모르겠습니다.

현재 유효성 검사(사이)는 0 ~ 0(0 ~0)만 허용하므로 명확하게...그 가치를 알 수 있습니다.selectedOrder.totalprice가존재하지않습니다...

제 코드는 다음과 같습니다.

import bus from '../global/bus.js'
import {
  mapGetters
} from "vuex"
import {
  required,
  minLength,
  between
} from 'vuelidate/lib/validators'

var moment = require('moment')
var alertify = require('../assets/alertify.js')

export default {
  name: "modal",
  data() {
    return {
      comment: null,
      refundAmount: null,
      paymentOptionsAgreementId: null,
      moveToAppId: null
    }
  },
  validations: {
    refundAmount: {
      between: between(0, this.selectedOrder ? this.selectedOrder.totalprice : 0)
    }
  },
  mounted() {
    this.$v.$touch()
  },
  computed: {
    ...mapGetters(["visibleModalComponent", "selectedOrder", "loggedInUser", "accessToken", "paymentoptions"])
  }
}

<template>
  
  <div class="form-group">
                                <label class="col-sm-5">Refundér beløp</label>
                                <div class="col-sm-7">
                                    <input
                                        v-model.trim="refundAmount" 
                                        v-on:input="$v.refundAmount.$touch" 
                                        v-bind:class="{error: $v.refundAmount.$error, 
                                                       valid: $v.refundAmount.$dirty && 
                                                       !$v.refundAmount.$invalid}"
                                        type="text" 
                                        class="form-control">
                                    </input>
                                    <pre>{{ $v }}</pre>
                                   
                                </div>
                            </div>
  
</template

계산된 값(올바른 상태)으로 업데이트되었지만 여전히 작동하지 않습니다.

계산 코드:

computed: {
        ...mapGetters(["visibleModalComponent", "selectedOrder", "loggedInUser", "accessToken", "paymentoptions"]),
        totalPrice() {
            return this.selectedOrder ? this.selectedOrder.totalprice : 0
        }
    },

검증:

validations: {
        refundAmount: {
            between: between(0, this.totalPrice)
        }
    },

스크린샷:

totalPrice에 대해 계산된 값을 사용해 보십시오.

export default {
  name: "modal",
  data() {
    return {
      comment: null,
      refundAmount: null,
      paymentOptionsAgreementId: null,
      moveToAppId: null
    }
  },
  validations: {
    refundAmount: {
      between: between(0, this.totalprice)
    }
  },
  computed: {
    ...mapGetters(["visibleModalComponent", "selectedOrder", "loggedInUser", "accessToken", "paymentoptions"]),
    totalPrice() {
      return this.selectedOrder ? this.selectedOrder.totalprice : 0
    }
  } 

편집 Terje와의 공동 작업 결과 다음과 같은 수정 사항이 있습니다.

Vuelidate는 검증에 대한 매개 변수로 변수를 사용할 수 있는 함수가 필요합니다. 따라서 작업 코드는 다음과 같습니다.

validations: {
  refundAmount: {
    // between: between(0, this.totalPrice)
    between (value) {
      return between(0, this.totalPrice)(value)
    }
  }
},

참조: 변수를 검증에 사용할 수 있습니까? #55

https://vuelidate.js.org/ #sub-dynamic-validation-http://https://vuelidate.js.org/ 의 설명에 따라서, 검증 스킴을 동적으로 변경합니다.

예를 들어 검증은 보통 다음과 같이 정의됩니다.

 validations: {
        refundAmount: {
            between: between(0, this.selectedOrder ? 
               this.selectedOrder.totalprice : 0)
        }
 }

다음과 같이 검증 개체를 함수로 변경합니다.

validations () { 
     return {
         refundAmount: {
             between: between(0, this.selectedOrder ?                                           
             this.selectedOrder.totalprice : 0)
         }
    }
}

이것에 의해, 검증 스키마가 동적으로 되어, Vuex 스토어 데이터를 포함한 컴포넌트의 데이터에 액세스 할 수 있게 됩니다.이것에 의해, minLength, maxLength등의 빌트인 Vuelidate 검증자는, 이 키워드를 사용하는 커스텀 검증자도 액세스 할 수 있습니다.

언급URL : https://stackoverflow.com/questions/46614697/vue-vuelidate-between-using-max-value-from-store-value