\n \u003C/UFormGroup>\n \u003CUFormGroup label=\"Training Week\" name=\"trainingWeek\">\n \u003Cdiv v-for=\"(day, index) in state.trainingWeek\" :key=\"index\">\n \u003CUFormGroup label=\"Day\" name=\"trainingWeek[' + index + '].day\">\n \u003CUInput v-model=\"day.day\" />\n \u003C/UFormGroup>\n \u003CUFormGroup label=\"Exercises\" name=\"trainingWeek[' + index + '].exercises\">\n \u003Cdiv v-for=\"(exercise, exerciseIndex) in day.exercises\" :key=\"exerciseIndex\">\n \u003CUInput v-model=\"exercise.exerciseName\" />\n \u003C/div>\n \u003C/UFormGroup>\n \u003Cdiv class=\"mt-4 flex justify-end\">\n \u003CUButton @click=\"addExercise(index)\">Add Exercise\u003C/UButton>\n \u003C/div>\n \u003C/div>\n \u003C/UFormGroup>\n \u003Cdiv class=\"mt-4 flex justify-end\">\n \u003CUButton @click=\"addDay\">Add Day\u003C/UButton>\n \u003CUButton type=\"submit\">Submit\u003C/UButton>\n \u003C/div>\n \u003C/UForm>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nimport { z } from \"zod\";\nimport type { FormSubmitEvent } from \"#ui/types\";\nconst state = reactive({\n name: \"\",\n trainingWeek: [\n {\n day: \"\",\n exercises: [\n {\n exerciseName: \"\",\n },\n ],\n },\n ],\n});\n\nconst schema = z.object({\n name: z.string().min(1, \"Required field\"),\n trainingWeek: z.array(\n z.object({\n day: z.string().min(1, \"Required field\"),\n exercises: z.array(\n z.object({\n exerciseName: z.string().min(1, \"Required field\"),\n }),\n ),\n }),\n ),\n});\n\ntype Schema = z.infer\u003Ctypeof schema>;\n\nconst handleSubmit = (event: FormSubmitEvent\u003CSchema>) => {\n console.log(JSON.stringify(event.data, null, 2));\n};\n\nconst addExercise = (index: number) => {\n state.trainingWeek[index].exercises.push({ exerciseName: \"\" });\n};\n\nconst addDay = () => {\n state.trainingWeek.push({ day: \"\", exercises: [{ exerciseName: \"\" }] });\n};\n\u003C/script>\n\n```\n\nI render the form based on state and dynamically add fields.\n\nThe form automatically sets up errors for name ( or any first level fields ) but doesn't set up errors for nested ones like day or exerciseName in the above example\n\nWhat's the proper way to create dynamic forms and avail error setting ? \n\nI'm able to get the following:\n```json\nprofile.vue:68 ZodError: [\n {\n \"code\": \"too_small\",\n \"minimum\": 1,\n \"type\": \"string\",\n \"inclusive\": true,\n \"exact\": false,\n \"message\": \"Required field\",\n \"path\": [\n \"trainingWeek\",\n 0,\n \"day\"\n ]\n },\n {\n \"code\": \"too_small\",\n \"minimum\": 1,\n \"type\": \"string\",\n \"inclusive\": true,\n \"exact\": false,\n \"message\": \"Required field\",\n \"path\": [\n \"trainingWeek\",\n 0,\n \"exercises\",\n 0,\n \"exerciseName\"\n ]\n }\n]\n```\noutput by parsing schema \n```js\nwatchEffect(() => {\n try {\n schema.parse(state);\n } catch (error) {\n console.error(error);\n }\n});\n```\n\n",[2940],{"name":2926,"color":2927},2674,"How to ensure UForm and UFormGroup auto assigns errors for nested dynamic form.","2024-11-18T16:59:59Z","https://github.com/nuxt/ui/issues/2674",0.7241138,{"description":2947,"labels":2948,"number":2953,"owner":2862,"repository":2862,"state":2917,"title":2954,"updated_at":2955,"url":2956,"score":2957},"Hi,\r\n\r\nI tried handle `error()` from an event handler in plugin/middleware. On client-side error() from event was handled, but on server-side not.\r\n\r\n**my plugin**\r\n```javascript\r\nexport default ({ app, req, error }, inject) => {\r\n // ...\r\n api.client.on('error', err => {\r\n console.log(err)\r\n error({ statusCode: 503, message: err.message })\r\n })\r\n}\r\n```\r\n\r\nI tried this code in **middleware** and has take the same effect.\r\n\r\n**Event is emitted from Promise for general Promise error handling from my service**\r\n\r\nIf i handle error() outside of event handler, then all works ok on server and client.\r\n\r\n```javascript\r\nexport default ({ app, req, error }) => {\r\n error({ statusCode: 503, message: 'error' })\r\n}\r\n```\r\n\r\nIt's a bug, or I doing something wrong? Thanks\r\n\r\n**Nuxt version:** 1.0.0-rc11\r\n**Node version:** v8.9.1\r\n**Browser** Google Chrome 61.0.3163.100 x_64\r\n**OS:** `Linux ellen-wrk 4.4.0-97-generic #120-Ubuntu SMP Tue Sep 19 17:28:18 UTC 2017 x86_64 x86_64 x86_64 GNU/Linux`\r\n\r\n \r\n \n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2171\">#c2171\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2949,2950],{"name":2886,"color":2887},{"name":2951,"color":2952},"2.x","d4c5f9",2501,"error() not handled on server side in event","2023-01-22T15:30:04Z","https://github.com/nuxt/nuxt/issues/2501",0.72873837,{"description":2959,"labels":2960,"number":2963,"owner":2862,"repository":2862,"state":2917,"title":2964,"updated_at":2965,"url":2966,"score":2967},"### Version\n\n[v2.5.1](https://github.com/nuxt.js/releases/tag/v2.5.1)\n\n### Reproduction link\n\n[https://codesandbox.io/s/vy6863v787](https://codesandbox.io/s/vy6863v787)\n\n### Steps to reproduce\n\n1. Create an image element with invalid path (which will produce not found error)\n2. Bind a method to @error event\n\n### What is expected ?\n\nThe method should run\n\n### What is actually happening?\n\nNot running\n\n### Additional comments?\n\nIt's working fine when using Vue directly.\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c9021\">#c9021\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2961,2962],{"name":2886,"color":2887},{"name":2951,"color":2952},5493,"Not firing @error event on img element","2023-01-22T15:33:04Z","https://github.com/nuxt/nuxt/issues/5493",0.7391814,["Reactive",2969],{},["Set"],["ShallowReactive",2972],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f5zHC0EJBo5os7QJ1Pd5PxgAO0OPAyK4RuN4ftSxOTZI":-1},"/nuxt/ui/4168"]