Question

我有一个Object数组但是当我想从数组列表中删除一个对象时，只从末尾删除项目

Html：

<div id="app">
  <table>
    <tr>
      <td><input type="text" name="test1" /></td>
      <td>
        <button class="btn" @click="addrow">add row</button>
      </td>
    </tr>
    <tr v-for="(row,index) in rows">
      <td><input type="text" name="test2" /></td>
      <td>
          <button class="btn" @click="removerows(index)">remove </button>
      </td>
    </tr>
  </table>
</div>

JS：

 new Vue({
        el: "#app",
        data: {
          counterrow:1,
            rows:[],
        },
        methods: {
            addrow:function(){
           this.rows.push({
                    id:this.counterrow
                });
          },
          removerows:function(index){
           this.rows.splice(index,1);
          },
        },
        });

Splice（index，1）无法正常工作，只删除每次删除的最后一个元素，现场演示：jsfiddle

Answer 1

我想你可能会错过了解发生了什么：

在VueJS中有一种缓存方法，允许重用现有的组件生成： - 渲染时，每个对象都被视为等于（在DOM级别）。

所以VueJS删除了最后一行，因为它可能要求最少的计算，然后重新计算预期的状态。对此有很多不利的情况（有时，本地状态不会重新计算）。要了解这一点：根据文档中的建议，使用:key来跟踪对象的ID。来自文档：

当Vue更新使用v-for渲染的元素列表时，默认情况下它使用“就地补丁”策略。如果数据项的顺序已经改变，而不是移动DOM元素以匹配项的顺序，Vue将就地修补每个元素并确保它反映应该在该特定索引处呈现的内容。这类似于Vue 1.x中track-by =“$ index”的行为。

此默认模式效率很高，但仅适用于列表呈现输出不依赖于子组件状态或临时DOM状态（例如表单输入值）。

为Vue提供一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有元素，您需要为每个项目提供唯一的键属性。 key的理想值是每个项目的唯一ID。这个特殊属性大致等同于1.x中的track-by，但它的作用类似于属性，因此您需要使用v-bind将其绑定到动态值...

临时DOM状态：这里指的是你的行为。

您的更正后的代码（关联的小提琴：https://jsfiddle.net/BenoitNgo/3Lrmswc5/）：

HTML：

<div id="app">

<table>
<tr>
  <td><input type="text" name="test1" /></td>
  <td><button class="btn" @click="addrow">add row</button></td>
</tr>
<tr v-for="(row,index) in rows" :key="row.id">
  <td><input type="text" name="test2"/></td>
  <td><button class="btn" @click="removerows(index)" >remove </button></td>
</tr>
</table>
</div>

在你的javascript中：

new Vue({
            el: "#app",
            data: {
              counterrow:1,
                rows:[],
            },
            methods: {
                addrow:function(){
                  this.counterrow += 1;
                  this.rows.push({
                        id:this.counterrow,
                        model: ""
                    });
              },
              removerows:function(index){
               this.rows.splice(index,1);
              },
            },
            });

在此代码中：

我更正了counterrow永远不会增加的事实
我添加了:key

:key的文档：https://vuejs.org/v2/guide/list.html#key

这是另一个jsFiddle https://jsfiddle.net/BenoitNgo/2a1u1j2b/3/：

添加v-model
在表单下方显示数据
更正了counterrow永远不会增加的事实
添加:key

拼接不正常我的对象列表VueJs

1 个答案: