v5: Fields in Dev tools do not render correctly if field name is "id"
### 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 条评论