Vue3 Challenge: Array Editor

As a Developer I need a component XArray that can edit arrays of strings.

Acceptance criteria

1. XArray accepts array of strings in v-model
2. It renders each string as separate input
3. When value of input is changed, it's written back to the array
4. If value is empty the element is removed from array
5. There is always one extra input shown, so that it is possible to add new values
6. Last input is not loosing the focus on typing and new extra input is shown below it
7. Examples in App.vue work as expected

Example

Let's say that myArray=['one', 'two']
Given Vue Template should result into Resulting HTML.

Vue Template

<XArray v-model="myArray" />

Resulting HTML

<div>
  <input value="1">
  <input value="2">
  <input value="">
</div>

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