Question

我是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/

Answer 1

为您的行元素添加key属性

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

使用v-for循环呈现的元素的唯一键有助于vue的虚拟dom通过在针对旧列表区分新节点列表时识别VNode来克服渲染错误。

有关key属性

的详情，请参阅docs

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

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

2 个答案: