我有一個表單,其中某些欄位位於物件內:
<script setup lang="ts"> ... const schema: yup.SchemaOf<any> = yup.object({ group: yup.string().nullable().required(), description: yup.string().nullable().required(), user: yup .object({ first_name: yup.string().required(), last_name: yup.string().required(), }) .required(), }) const { errors, handleSubmit, isSubmitting } = useForm({ validationSchema: schema, initialValues: { group: '', description: '', user: {} }, }); const { value: group } = useField<string>('group'); const { value: description } = useField<string>('description'); const { value: user } = useField<any>('user'); const isValid = useIsFormValid(); ... </script> <template> <div> <label for="group">Group:</label ><input id="group" v-model="group" type="text" /> </div> <div> <label for="description">Description:</label ><input id="description" v-model="description" type="text" /> </div> <div> <label for="first-name">First name</label ><input id="first-name" v-model="user.first_name" type="text" /> </div> <div> <label for="last-name">Last name</label ><input id="last-name" v-model="user.last_name" type="text" /> </div> <button :disabled="!isValid">Save</button> ... </template>
但是該物件的資料驗證僅在更改其外部欄位後完成,即填入group
, description
, first_name
, last_name
(以相同順序),且表單不會僅當您再次編輯group
或description
時才被視為有效。
我自己更改欄位時如何進行驗證?
這是完整程式碼的連結。
我使用以下版本:
"vue":"^3.2.37", "vee-validate": "^4.5.11", "yup": "^0.32.11"
當您將 useField() 與物件一起使用時,嵌套屬性將失去其反應性連線。因此,這裡有兩個選項可以解決此問題:用reactive()包裝useField或為每個巢狀屬性單獨使用useField()。
選項1
選項2
這裡是一個工作範例這裡