How to add and remove item from array in components in Vue 2

Question

I made a component  my-item  which contains three elements  a dropdown  populated by  itemList   and two input boxes populated from the dropdown  This component is considered a row   I am trying to add and delete one row at a time but two things i am not sure about   1  what to add to the rows array   2  why is this rows splice index 1  removing only the last row   https   jsbin com mugunum edit html output  Thanks   lt div id  app  gt       lt my-item v-for   row  index  in rows            itemdata  itemList            v-on remove  removeRow index   gt       lt  my-item gt   lt div gt       lt button  click  addRow  gt  Add Row  lt  button gt   lt  div gt   lt  div gt    lt template id  item-template  gt   lt div gt       lt select v-model  selected  gt           lt option v-for  item in itemdata    value  item  gt                item code             lt  option gt       lt  select gt       lt input type  text  placeholder  Text  v-model  selected description  gt       lt input type  text  placeholder  value  v-model  selected unitprice  gt       lt button v-on click   remove  gt  X  lt  button gt   lt  div gt   lt  template gt   Vue component  my-item     props    itemdata    template    item-template   data  function          return       selected  this itemdata 0           methods        remove             this  emit  remove                 new Vue   el    app   data        rows          itemList              code   Select an Item   description      unitprice                 code   One   description   Item A   unitprice   10              code   Two   description   Item B   unitprice   22              code   Three   description   Item C   unitprice   56             methods        addRow           this rows push         what to push unto the rows array             removeRow index          this rows splice index 1      why is this removing only the last row

User · Accepted Answer

There are few mistakes you are doing    You need to add proper object in the array in addRow method You can use splice method to remove an element from an array at particular index  You need to pass the current row as prop to my-item component  where this can be modified    You can see working code here   addRow       this rows push  description      unitprice       code           what to push unto the rows array     removeRow index      this  itemList splice index  1

User · Answer

You can use Array push   for appending elements to an array   For deleting  it is best to use this  delete array  index  for reactive objects      Vue delete  target  key    Delete a property on an object  If the object is reactive  ensure the deletion triggers view updates  This is primarily used to get around the limitation that Vue cannot detect property deletions  but you should rarely need to use it    https   vuejs org v2 api  Vue-delete

[arrays] How to add and remove item from array in components in Vue 2

Examples related to arrays

Examples related to vue.js

Examples related to vuejs2