Vuelidate minvalue 可选答案

【问题标题】：Vuelidate minvalue optionnalVuelidate minvalue 可选
【发布时间】：2018-07-16 07:41:09
【问题描述】：

我想验证一个可选的值“stock”。我正在使用 vuelidate (https://monterail.github.io/vuelidate/)

如果其他值 ('price') 大于 0，则值 'stock' 必须大于 0

如果 'price' 值未定义，则必须禁用股票价值验证器

price 是输入值（十进制数字），stock 是滑块（数字）

[编辑]

代码示例

<template>
  <form @submit.prevent="submit" class="offer-form">
    <q-field label="Prix initial" helper="Indiquer le prix initial de l'offre" :error="hasItemError('price')" :error-label="itemErrorLabel('price')">
      <q-input type="number" color="input" @blur="$v.item.price.$touch()" v-model="item.price" />
    </q-field>                 
    <q-field label="Stock" helper="Indiquer le nombre de stock" :error="hasItemError('stock')" :error-label="itemErrorLabel('stock')">
      <q-slider color="input" label-always  label :step=1 :min="0" @blur="$v.item.stock.$touch()" :max="50" v-model="item.stock"/>
    </q-field>
    <q-btn
        icon="fas fa-check"
        label="Valider"
        color="green"
        @click="submit"
    />
  </form>
</template>

<script>
import { required, requiredIf, decimal, minValue } from 'vuelidate/lib/validators'

export default {
  data () {
    return {
      item: {
        id: null,
        title: '',
        description: '',
        price: null,
        reductionPercentage: 15,
        stock: 0,
        startDate: new Date(),
        endDate: null,
        product: null,
        shop: null,
        images: []
      },
  },
  validations: {
    item: {
      title: { required },
      startDate: { required },
      endDate: { required },
      price: { decimal },
      reductionPercentage: {
        requiredIf: requiredIf((vueInstance) => {
          return vueInstance.price > 0
        }),
        minValue: minValue(15)
      },
      stock: {
        requiredIf: requiredIf((vueInstance) => {
          return vueInstance.price > 0
        }),

        // minValue ???
      }
    }
  },
  methods: {
    submit () {
      this.onSubmit = true
      if (this.isValidate()) {
        // Validation ok
      }
      this.onSubmit = false
    },
    isValidate () {
      this.$v.item.$touch()
      if (this.$v.item.$error) {
        this.$q.notify({message: 'Vérifiez les champs en erreur', position: 'center'})
        return false
      }
      return true
    }
  }
}

我测试了这个但是不行=>

minValue: minValue((vueInstance) => {
   return vueInstance.price > 0 ? vueInstance.stock > 0 : true
})

我该怎么做？

谢谢

【问题讨论】：

标签： vuejs2 vuelidate

【解决方案1】：

你没有提供很多代码，所以很难理解你的目标，但我会尝试，告诉我它是否是你想要的:)

Stock 的验证器是 Checkbox 或函数还是？

var app = new Vue({
  el: '#app',
  data: {
    price: 0,
    stock: 0,
  },
  
  computed: {
  stockvalidator: function()
  {
    if(this.price > 0 && this.stock > 0) return true
    else if(this.price > 0 && this.stock <= 0) return false
    else return false 
    
    
    
  }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">


  <input type="number" v-model="price">
  Price: {{price}}
  
  <input type="number" v-model="stock">
  Stock: {{stock}}
  
  <br>
  
  <input :disabled="!stockvalidator" type="checkbox"> Stock Validator is {{stockvalidator}}
  
</div>

【讨论】：

【解决方案2】：

不确定您是否还在为此苦苦挣扎，或者是否有人遇到同样的问题，但这是我的两分钱：

minValue: (stockValue, item) => {
   return item.price > 0 ? stockValue > 0 : true
})

干杯！

【讨论】：

【解决方案3】：

我认为你可以这样做：

stock: {
    requiredIf: requiredIf(() => {
      return this.price > 0 || this.price
    }),
    minvalue: helpers.withMessage(
      "The minimum value for the stock is 0",
      helpers.withAsync(async value => {
        let retvalue;
        if(this.price > 0 && value > 0){
          retvalue = true;
        }
        else if (this.price > 0 && value <= 0){
          retvalue = false;
        }
        else{
          retvalue = true;
        }
        return retvalue;
      })
    )
  }

记住从 vuelidate 导入“助手”。

我建议您使用自定义验证器制作自己的文件，然后您可以在项目的每个地方使用它。类似 utils/customValidators.js。

【讨论】：