Javascript 拼接无法正常工作我的对象列表VueJs

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

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>

---

拼接（索引，1）工作不正常，每次删除仅删除最后一个元素，实时演示：

我想您可能误解了发生的情况：

---

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

因此，VueJS删除最后一行，因为它可能需要最少的计算，然后重新计算预期状态。这有许多附带情况（有时，不重新计算本地状态）。要避免这种情况：按照文档中的建议，使用

：key

跟踪对象的id。从文件中：

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

此默认模式非常有效，但仅适用于列表渲染输出不依赖子组件状态或临时DOM状态（例如表单输入值）的情况

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

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

这是您更正的代码（关联的fiddle:）：

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>

在此代码中：

• 我纠正了

  计数器行

  从未递增的事实
• 我添加了一个

  ：键

的文档：键

：

下面是另一个JSFIDLE，其中包含：

• 添加v模型
• 在表单下方显示数据
• 更正了

  计数器行

  从未递增的事实
• 添加

  ：键

---

单击事件中的索引来自何处？从数组列表（行）中索引，当获取数组获取它（行，索引）并发送到删除函数时，实际上它是起作用的，因为html只反映迭代计数器，而不反映任何数据。如果您从数据中注入一些东西，它看起来很好：……非常感谢，这是工作，有没有其他方法不向输入注入值？（我的输入有动态名称和id）我注意到它也丢失了用户输入的表单输入值，这正常吗？测试此代码，用户输入的输入值不再丢失。我会更新一个更完整的小提琴谢谢！这毁了我的时间，就像“发生了什么！”在研究它之前，我忽略了希望在我完成它之后将其放入的关键“在VueJS中，有一种缓存方法允许重用生成的现有组件”我为此绞尽脑汁数小时了。目前正在进行原型设计，只是简单地将一个对象拼接到另一个对象，而没有得到更新。原来是因为它在绑定中生成了相同的键！你是我今天的英雄！

<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>

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