vue.js - VUE : Vuelidate between. 使用存储值中的最大值？

Question

我正在使用 VUE 和 Vuelidate 来验证表单输入。在这种情况下.. 这是一个模态弹出窗口，它通过 ...mapGetters 从商店获取数据。

如果我像这样设置静态值，它会起作用:

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

但是当像这样使用商店中的值时，它不会映射到该值:

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

我的猜测... this.selectedOrder.totalprice 在 vuelidate 组件需要它之前不存在？不确定如何实际处理那个...

当前的验证(介于两者之间)只接受从 0 到 0(零到零)，如此清楚……this.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)
        }
    },

截图:

Answer 1

尝试计算 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)
    }
  }
},

引用:Is it possible to use a variable for validation? #55