Vue3 Challenge: Form Editor

As a Developer I need a component XForm that generates a form defined in schema and can edit an object.

Acceptance criteria

1. it accepts object in v-model
2. it accepts array of objects in fields property
3. it renders <form> with same amount of child elements as length of fields array
4. each field in fields describes a configuration for a child
5. field.component gets the name of the component (or tag) that should be rendered (for example it can be input, or select, or div, etc.). Default: input.
6. field.field get the name of the key of the v-model object to edit
7. field.field value is used as name attribute of the child
8. all other properties are binded as html attributes (such as type, placeholder, etc.)
9. when value of input is changed, it updates v-model
10. examples in App.vue work as expected: XForm with paramteres myObjectN and myFieldsN should render into html myResultN

Example

Let's say that

object = { name: 'Alex', dateOfBirth: '06.01.1989', eyeColor: 'blue', bio: 'I love apples' } 

and

schema = [ { field: 'name', component: 'input', type: 'text', placeholder: 'Name', }, { field: 'dateOfBirth', component: 'input', type: 'datetime-local' }, { field: 'eyeColor' }, { field: 'bio', component: 'textarea' } ] 

Given Vue Template should result into Resulting HTML.

Vue Template

<XForm v-model="object" :fields="schema" /> 

Resulting HTML

<form> <input name="name" placeholder="Name" /> <input name="dateOfBirth" type="datetime-local" /> <input name="eyeColor" /> <textarea name="bio" /> </form> 

How to submit?

1. Write in the comments "Challenge accepted".
2. Fork stackblitz project and send a new link with your solution as a reply to your original comment.

Unit tests are good to have, but optional.

Share useful articles in the comments.

In a meantime I will start working on a tutorial and a solution. Don't miss it - subscribe to discussion and follow me.

Tips

• If you are new to Vuejs, start with tutorial