ITADN

v5: Fields in Dev tools do not render correctly if field name is "id"

#5116Openedosrecki 创建于 2026-01-23
E
edosreckicommented
### What happened? I have a filed array of nested inputs (object-like inputs): ```ts const { fields } = useFieldArray<{ id: string; name: string }>('notificationChannels') ``` Dev tools do not render these fields correctly, but instead print the JSON output for them, as shown in the following screenshot: <img width="944" height="494" alt="Image" src="https://github.com/user-attachments/assets/ab9a52ad-4bed-47e4-b987-45cee3a4e620" /> Output example: ```json { "id": "JTdCJTIyZiUyMiUzQTAlMkMlMjJmZiUyMiUzQSUyMm5vdGlmaWNhdGlvbkNoYW5uZWxzJTVCMCU1RC5uYW1lJTIyJTJDJTIydHlwZSUyMiUzQSUyMnBhdGhTdGF0ZSUyMiU3RA==", "label": "notificationChannels[0].name", "tags": [ { "label": "Field", "textColor": 0, "backgroundColor": 448379 } ] } ``` Problem is caused by the following line: https://github.com/logaretm/vee-validate/blob/93a50934b440a0a28b921bdf33891582986f130c/packages/vee-validate/src/devtools.ts#L239 **Workaround**: Patch vee-validate and replace that line with: ```ts if ('id' in tree && typeof tree.id === 'string') ``` Result after applying workaround: <img width="940" height="353" alt="Image" src="https://github.com/user-attachments/assets/62af0030-9b06-4f49-8f4c-d992427e990d" /> ### Reproduction steps ```vue <script setup lang="ts"> const { fields } = useFieldArray<{ id: string; name: string }>('someField') </script> <template> <div v-for="(field, index) in unref(fields)" :key="field.key"> <input :name="`someField[${index}].id`"> <input :name="`someField[${index}].name`"> </div> </template> ``` ### Version Vue.js 3.x and vee-validate 4.x ### What browsers are you seeing the problem on? - [ ] Firefox - [ ] Chrome - [ ] Safari - [ ] Microsoft Edge ### Relevant log output ```shell ``` ### Demo link . ### Code of Conduct - [x] I agree to follow this project's [Code of Conduct](CONDUCT.md)
0 条评论