>我有一个对象数组，但是当我想从数组列表中删除对象时，只有项目从末尾删除
目录 ：
<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);
},
},
});
拼接(索引，1)无法正常工作，每次删除时只需删除最后一个元素，现场演示：jsfiddle
我想你可能错过了正在发生的事情：
在 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 状态：这里指的是您的行为。
有您更正的代码(相关的小提琴：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://v2.vuejs.org/v2/guide/list.html#key
这是另一个jsFiddle https://jsfiddle.net/BenoitNgo/2a1u1j2b/3/：
- 添加 V 模型
- 在表单下方显示数据
- 更正了
counterrow从未递增的事实 - 添加
:key