How to remove rows from table in Vue component?

Question

I'm brand new to Vue and have been struggling with this all day. I am trying to build a table using Vue components that can allow users to add and remove rows.

The problem I'm having is the removeRow() fuction is not removing the selected row, it's removing the last row off the table. Can anyone help me out?

Vue.component('newtemplate', {
    template: `<div>
                <div>
                    <button class="button btn-xs btn-success" @click="addRow">+</button>
                </div>
                <table>
                    <thead>
                        <tr>
                            <th class="col-lg-6 nopadding"><input type="text" value="Col 1" class="borderless nopadding col-lg-6"></th>
                            <th class="col-lg-2 nopadding"><input type="text" value="Col 2" class="borderless nopadding col-lg-12"></th>
                            <th class="col-lg-2 nopadding"><input type="text" value="Col 3" class="borderless nopadding col-lg-12"></th>
                            <th class="col-lg-2 nopadding"><input type="text" value="Col 4" class="borderless nopadding col-lg-12"></th>
                        </tr>
                    </thead>
                  <tbody>
                    <tr v-for="(row, index) in rows" :row="row">
                        <td>
                            <input type="text" class="form-control nopadding text-center">
                        </td>
                        <td>
                            <input type="text" class="form-control nopadding text-center">
                        </td>
                        <td>
                            <input type="text" class="form-control nopadding text-center">
                        </td>
                        <td>
                            <input type="text" class="form-control nopadding text-center">
                        </td>
                        <td>
                          <button type="button" class="text-center button btn-xs btn-danger" v-on:click="removeRow(index)">-</button>
                        </td>
                    </tr>
                  </tbody>
                </table>
            </div>`,
    data: function() {
        return {
            rows: [{row: ""}]
        }
    }, 
    methods:{
        addRow(){
            this.rows.push({row: ''});
        },
        removeRow: function(index) {
            this.rows.splice(index, 1);
        }
    }
});

UPDATE I made a fiddle https://jsfiddle.net/4d2uzx0r/

Roy J · Accepted Answer · 2017-08-10 13:27:37Z

1

Vue is removing the appropriate item from rows, but you don't have your inputs bound to anything, so Vue doesn't know about the values in the table row inputs, it only knows that it needs to render fewer rows. Vue takes shortcuts when it can and can only keep track of state that it knows about.

I've updated your fiddle to bind the first column to a row element (each row item is now an array). If you fill in values in the first column, you can see that it deletes the appropriate row.

<input type="text" class="form-control nopadding text-center" v-model="row[0]">

and

addRow() {
    this.rows.push({
      row: []
    });
  },
  removeRow: function(index) {
    console.log("Removing", index);
    this.rows.splice(index, 1);
  }

answered Aug 10, 2017 at 13:27

Roy J

44k10 gold badges84 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

monkeyman Over a year ago

Thanks Roy. I didn't realise I was required to bind the values. I will work on doing that for all the cells now. Cheers.

tony19 · Accepted Answer · 2022-07-16 00:15:43Z

1

Add a key attribute to your row element

<tr v-for="(row, index) in rows" :key="index" :row="row">
    //...
</tr>

Unique keys for elements rendered with v-for loop helps vue's virtual dom to overcome rendering errors by identifying VNodes when diffing the new list of nodes against the old list.

See docs for more info about key attribute

edited Jul 16, 2022 at 0:15

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Aug 10, 2017 at 11:24

Vamsi Krishna

31.4k8 gold badges73 silver badges81 bronze badges

4 Comments

monkeyman Over a year ago

Thanks for the help. Unfortunately it hasn't solved the problem. The table is still deleting the last row, not the selected row.

Vamsi Krishna Over a year ago

@DylanHolloway Addinfg a dynamically bound key attribute should solve the problem ...can you produce a fiddle so that it can be debugged easily

Vamsi Krishna Over a year ago

@DylanHolloway here is your updated fiddle jsfiddle.net/4d2uzx0r/4

monkeyman Over a year ago

Thanks Vamsi. Looks good. I'm finding now that the row is deleted when the button is pressed, but if you type some text in one of the inputs and then click delete, the text remains behind and just goes into the next row. Is there a way to fix that?

Collectives™ on Stack Overflow

How to remove rows from table in Vue component?

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related