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);
下添加一行:就可以达到你要的效果。