vue.js - VUE:在之间进行筛选。使用存储值中的最大值？

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

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

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

但是当使用这样的商店中的值时，它不会与该值对应:

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

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

当前的验证(介于两者之间)仅接受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)
        }
    },

截图:

最佳答案

尝试为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