DEV Community

Cover image for Vue3 Challenge: Array Editor
Aleksey Razbakov
Aleksey Razbakov

Posted on • Updated on

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" />
Enter fullscreen mode Exit fullscreen mode

Resulting HTML

<div>
  <input value="1">
  <input value="2">
  <input value="">
</div>
Enter fullscreen mode Exit fullscreen mode

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

Top comments (20)

Collapse
 
biglevvi profile image
Emmanuel Osayame

Challenge accepted

Collapse
 
biglevvi profile image
Emmanuel Osayame
Collapse
 
joshuamwo profile image
joshuamwo

Challenge accepted

Collapse
 
joshuamwo profile image
joshuamwo
Collapse
 
mahsakhorshiddoust profile image
mahsa

Challenge accepted!

Collapse
 
nelson2411 profile image
Nelson Rosales

Challenge Accepted

Collapse
 
mgsgde profile image
Magnus Gödde

Challenge accepted

Collapse
 
mgsgde profile image
Magnus Gödde
Collapse
 
devhabeeblateef profile image
devhabeeb
Collapse
 
samuelasiabaka profile image
Chinedu Samuel Asiabaka

Challenge accepted

Collapse
 
samuelasiabaka profile image
Chinedu Samuel Asiabaka
Collapse
 
akejutaiwo profile image
Akeju Taiwo • Edited
Collapse
 
ahmadkhasawneh96 profile image
ahmadkhasawneh96

Challenge accepted

Collapse
 
alhabib911 profile image
Abdullah Al Habib

Challenge accepted.