Can't validate SelectMenu or UInputMenu NuxtUI components using Yup
I'm trying to validate a SelectMenu and UInputMenu NuxtUI components using Yup. Here's the usage:
Everything except the Select and UInputMenu seem to validate correctly, not sure whats going on!
<UFormGroup label="Product Type" name="productTypeId">
<UInputMenu v-model="listing.product.productTypeId!" :options="productTypeOptions" value-attribute="id"
option-attribute="label"
:change="productTypeChange(productTypeOptions.find((productType: ProductType) => productType.id === listing.product.productTypeId))" />
</UFormGroup>
<UFormGroup label="Product Type" name="productTypeId">
<UInputMenu v-model="listing.product.productTypeId!" :options="productTypeOptions" value-attribute="id"
option-attribute="label"
:change="productTypeChange(productTypeOptions.find((productType: ProductType) => productType.id === listing.product.productTypeId))" />
</UFormGroup>
<UFormGroup label="Auction Duration" name="duration">
<USelect type="number" v-model="listing.duration" :options="durationOptions">
<template #leading>
<UIcon name="i-heroicons-clock" class="w-5 h-5" />
</template>
</USelect>
</UFormGroup>
<UFormGroup label="Auction Duration" name="duration">
<USelect type="number" v-model="listing.duration" :options="durationOptions">
<template #leading>
<UIcon name="i-heroicons-clock" class="w-5 h-5" />
</template>
</USelect>
</UFormGroup>
const newAuctionSchema = object({
title: string().required('Required'),
description: string().required('Required'),
duration: number().required('Required'),
startingPrice: number().required('Required'),
reservePrice: number().required('Required'),
images: mixed().required('Required')
.test({
message: '6 images maximum',
test: (file, context) => {
const isValid = listing.value.images.length < 6;
if (!isValid) context?.createError();
return isValid;
}
}),
Year: number()
.min(1900, 'Year must be 1900 or later')
.max(new Date().getFullYear(), 'Year cannot be in the future')
.required('Required'),
Model: string().required('Required'),
Make: string().required('Required'),
Color: string().required('Required'),
buyNowPrice: number().notRequired(),
productTypeId: number().required('Required'),
productName: string().required('Required')
})
const newAuctionSchema = object({
title: string().required('Required'),
description: string().required('Required'),
duration: number().required('Required'),
startingPrice: number().required('Required'),
reservePrice: number().required('Required'),
images: mixed().required('Required')
.test({
message: '6 images maximum',
test: (file, context) => {
const isValid = listing.value.images.length < 6;
if (!isValid) context?.createError();
return isValid;
}
}),
Year: number()
.min(1900, 'Year must be 1900 or later')
.max(new Date().getFullYear(), 'Year cannot be in the future')
.required('Required'),
Model: string().required('Required'),
Make: string().required('Required'),
Color: string().required('Required'),
buyNowPrice: number().notRequired(),
productTypeId: number().required('Required'),
productName: string().required('Required')
})
1 Reply
I did this:
and the console output was
Product Type ID: cm0a9ct9y0005jpv8lelkzlx5
Duration: 3
So looks like the values are being updated correctly
Can anyone help?
watch(() => listing.value.product.productTypeId, (newVal) => {
console.log('Product Type ID:', newVal);
});
watch(() => listing.value.duration, (newVal) => {
console.log('Duration:', newVal);
});
watch(() => listing.value.product.productTypeId, (newVal) => {
console.log('Product Type ID:', newVal);
});
watch(() => listing.value.duration, (newVal) => {
console.log('Duration:', newVal);
});