Vuelidate minvalue optionnal - vuejs2

Question

I would like to validate a value 'stock' which is optionnal. I'm using vuelidate (https://monterail.github.io/vuelidate/)
Value 'stock' must be greater than 0 if an other value ('price') is greater than 0
If 'price' value is not defined, the validator of stock value must be disabled
price is an input value (decimal number), stock is a slider (number)
[EDIT]
Example of code
<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
}
}
}
I tested this but it's not ok =>
minValue: minValue((vueInstance) => {
return vueInstance.price > 0 ? vueInstance.stock > 0 : true
})
How can I do this ?
Thanks

Answer 1

You dont offer a lot of code so it is hard to understand your goal,but i will try,just tell me if it is what you wanted :)
Validator of Stock is a Checkbox or a function or ?
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

Not sure if you are strugling with this still, or there is anyone out there with the same issue, but here is my two cents:
minValue: (stockValue, item) => {
return item.price > 0 ? stockValue > 0 : true
})
Cheers!

Answer 3

I think you can do this:
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;
})
)
}
Remember import "helpers" from vuelidate.
And I advise you to make your own file with your custom validators, then you can use it in every places in your project. Something like utils/customValidators.js.