Question

我正在使用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)
        }
    },

屏幕截图：

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)
    }
  }
},

参考：enter link description here

VUE：介于两者之间。使用商店价值的最大值？

1 个答案: