我想用 Nuxt3 为跟随输入设置验证,但是不能。
<template>
<form method="" action="" @submit="onSubmit">
<ul class="form_radio_list">
<li
v-for="(employmentType, index) in mastersStore.masters?.EmploymentTypeCodes"
:key="employmentType.code"
>
<label class="form_checkbox_label">
<input
type="checkbox"
name="employment_type_codes"
v-model="employmentTypes"
:value="employmentType.code"
/>
<p class="form_checkbox_text">{{ employmentType.name }}</p>
</label>
</li>
</ul>
</form>
</template>
<script>
import { useForm, useField, useFieldArray } from 'vee-validate'
import { useMastersStore } from '~~/store/master'
import type { UpdateUserConditionForEmailInput } from '~~/types/user_condition_for_email'
import * as yup from 'yup'
const validationSchema = yup.object({
employment_type_codes: yup.array().min(1, '雇用形態は必須です'),
})
const { fields: employmentTypes } = useFieldArray('employment_type_codes')
const onSubmit = handleSubmit((params: UpdateUserConditionForEmailInput): void => {
props.goToConfirm(params)
})
</script>
基于README,我尝试了一些数组模式,但没有成功。 https://github.com/jquense/yup/blob/master/README.md#arrayoftype-schema-this
//CASE1
const validationSchema = yup.object({
employment_type_codes: yup.array().of(
yup.object().shape({
employmentTypes: yup.boolean().required('雇用形態は必須です'),
})
),
employment_type_codes: yup.array().required(1, '雇用形態は必須です'),
})
//CASE2
const validationSchema = yup.object({
employment_type_codes: yup.array().required(1, '雇用形態は必須です'),
})