vue.js - 关于vue2,v-for渲染input列表 删除的问题 ;
本文介绍了vue.js - 关于vue2,v-for渲染input列表 删除的问题 ;的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
1.渲染列表有input输入框，在不同的输入框内写值，在进行删除操作时，输入框内的值不是想要的结果
我删除第二项的时候，我需要的结果是 第一个输入框内为1，最后一个输入框为3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.3.3/vue.js"></script>
</head>
<body>
<div id="test">
<div v-for="(item,index) in items">
<div >
<input type="" name="" v-model="arr[index]">
<span v-text="Math.random()*10"></span>
</div>
<button @click="deleteItem(index,$event)">删除</button>
</div>
<button @click="addItem">新增</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#test",
data:{
items:[],
keyword:1,
arr:[]
},
methods:{
addItem:function () {
this.items.push({});
},
deleteItem:function(index,event){
// var $current = $(event.target);
// $current.prev().attr('key',2);
this.items.splice(index,1);
}
}
})
</script>
</body>
</html>
解决方案
在你的例子中，数据是保存在 arr 中的，所以，你的代码稍稍改下：
在 this.items.splice(index,1); 下添加一行：
this.arr.splice(index,1);就可以达到你要的效果。
这篇关于vue.js - 关于vue2,v-for渲染input列表 删除的问题 ;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
