Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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

<div id="app">     <my-item v-for="(row, index) in rows"          :itemdata="itemList"           v-on:remove="removeRow(index)">     </my-item> <div>     <button @click="addRow"> Add Row </button> </div> </div>  <template id="item-template"> <div>     <select v-model="selected">         <option v-for="item in itemdata"  :value="item">            {{ item.code }}         </option>     </select>     <input type="text" placeholder="Text" v-model="selected.description">     <input type="text" placeholder="value" v-model="selected.unitprice">     <button v-on:click= "remove"> X </button> </div> </template>  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?     } } }) 
like image 484
Jeffrey Avatar asked Dec 29 '16 06:12

Jeffrey


People also ask

How do I pass data from one component to another component in Vue?

Using Props To Share Data From Parent To Child. VueJS props are the simplest way to share data between components. Props are custom attributes that we can give to a component. Then, in our template, we can give those attributes values and — BAM — we're passing data from a parent to a child component!

Is provide inject available in Vue 2?

The Initial D release of Vue have some amazing new features, including improved server side rendering, v-model customisations, better error handling, provide & inject pair and many other small improvements. The provide and inject pair offers data flow deep in descendant chain.

How do I add props in Vue component?

To specify the type of prop you want to use in Vue, you will use an object instead of an array. You'll use the name of the property as the key of each property, and the type as the value. If the type of the data passed does not match the prop type, Vue sends an alert (in development mode) in the console with a warning.

How do I add something to my Vue list?

Render the Add Item button, and bind the click event. On the click event handler, pass data with random id to the addItem method to add a new list item on clicking the Add Item button.


1 Answers

There are few mistakes you are doing:

  1. You need to add proper object in the array in addRow method
  2. You can use splice method to remove an element from an array at particular index.
  3. 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) } 
like image 128
Saurabh Avatar answered Oct 23 '22 18:10

Saurabh