Vuelidate minvalue опциональный

Question

Я хотел бы проверить значение "акции", которое является необязательным. Я использую vuelidate ( https://monterail.github.io/vuelidate/)

Значение 'акции' должно быть больше 0, если другое значение ('цена') больше 0

Если значение 'цена' не определено, валидатор стоимости акций должен быть отключен

цена - входное значение (десятичное число), акции - ползунок (число)

[РЕДАКТИРОВАТЬ]

Пример кода

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

Как я могу это сделать?

Спасибо

Answer 1

Вы не предлагаете много кода, поэтому трудно понять вашу цель, но я постараюсь, просто скажите мне, если это то, что вы хотели:)

Валидатор акций это флажок или функция или?

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>

Answer 2

Не уверен, что вы все еще боретесь с этим, или есть кто-то с той же проблемой, но вот мои два цента:

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

Ура!

Answer 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.