I am front end developer from Ukraine. I have a problem validating the form with help vuelidate 2, cannot validate an array of strings or numbers (everything is fine with objects). I will be grateful for your help
here is a simplified form that I am trying to create:
<template>
<div v-for="(item, index) in formData.values" :key="index">
<input type="text" :value="formData.values[index]" @input="onChange(index, $event)" />
</div>
<button @click="addItem">add</button>
<button @click="submit">submit</button>
</template>
<script setup lang="ts">
import { computed, reactive } from 'vue'
import { helpers, required } from '@vuelidate/validators'
import useVuelidate from '@vuelidate/core'
const formData = reactive({ values: [''] })
const rules = computed(() => ({
values: {
$each: { required },
// $each: helpers.forEach({ required }), also not working
},
}))
const $v = useVuelidate(rules, formData)
const addItem = () => {
formData.values.push('')
}
const submit = async () => {
const isValid = await $v.value.$validate()
if (isValid) {
console.log('ok')
} else {
console.log('error', $v.value.$errors)
}
}
const onChange = (index: number, event: any) => {
const value = event.target.value
formData.values.splice(index, 1, value)
}
</script>