拼接不正常我的对象列表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>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
回答 1
Stack Overflow用户
发布于 2018-01-28 17:39:49
我想你可能误解了正在发生的事情：
在VueJS中，有一种缓存方法，允许重用生成的现有组件：-每个对象在呈现时都被认为是相等的(在DOM级别)。
所以VueJS删除了最后一行，因为它可能要求最少的计算，然后重新计算预期的状态。这种情况有很多副作用(有时，不会重新计算本地状态)。要避免这种情况:按照文档中的建议，使用:key来跟踪对象的id。从文档中：
当Vue更新使用v-
渲染的元素列表时，默认情况下它使用“就地补丁”策略。如果数据项的顺序已更改，则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);
},
},
});在此代码中：
我更正了incremented
- I不是
counterrow的事实，并添加了一个:key
:key的文档：https://vuejs.org/v2/guide/list.html#key
下面是另一个jsFiddle https://jsfiddle.net/BenoitNgo/2a1u1j2b/3/，它包含：
在form
- Corrected下面添加数据时，请注意
- v-model
- Displaying
- v-model
- Displaying a
:key
这一事实
https://stackoverflow.com/questions/48484773
复制相似问题
腾讯云开发者
