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

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模型
• 在表单下方显示您的数据
• 纠正了事实counterrow从未增加
• 添加一个 :key