如何从 Vue 组件的表中删除行？答案

【问题标题】：How to remove rows from table in Vue component?如何从 Vue 组件的表中删除行？
【发布时间】：2018-01-18 14:37:10
【问题描述】：

我是 Vue 的新手，整天都在为此苦苦挣扎。我正在尝试使用允许用户添加和删除行的 Vue 组件构建一个表。

我遇到的问题是removeRow() 函数没有删除选定的行，而是删除了表格的最后一行。谁能帮帮我？

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);
        }
    }
});

更新我做了一个小提琴 https://jsfiddle.net/4d2uzx0r/

【问题讨论】：

标签： vue.js components

【解决方案1】：

将key 属性添加到您的行元素

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

使用v-for 循环渲染的元素的唯一键通过在将新节点列表与旧列表进行比较时识别 VNode 来帮助 vue 的虚拟 dom 克服渲染错误。

有关key 属性的更多信息，请参阅docs

【讨论】：

感谢您的帮助。不幸的是，它并没有解决问题。该表仍在删除最后一行，而不是选定的行。
@DylanHolloway 添加一个动态绑定的键属性应该可以解决问题...你能制作一个小提琴，以便它可以轻松调试
@DylanHolloway 这是你更新的小提琴jsfiddle.net/4d2uzx0r/4
感谢 Vamsi。看起来不错。我现在发现按下按钮时该行被删除，但是如果您在其中一个输入中键入一些文本然后单击删除，则文本将保留在后面并进入下一行。有没有办法解决这个问题？

【解决方案2】：

Vue 正在从rows 中删除适当的项目，但您的输入没有绑定到任何东西，因此 Vue 不知道表格行输入中的值，它只知道它需要渲染更少行。 Vue 尽可能地使用捷径，并且只能跟踪它知道的状态。

我已经updated your fiddle 将第一列绑定到一个行元素（每个行项现在都是一个数组）。如果您在第一列中填写值，您可以看到它删除了相应的行。

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

和

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

【讨论】：

谢谢罗伊。我没有意识到我需要绑定这些值。我现在将努力为所有细胞做这件事。干杯。