关于vue2,v-for渲染input列表 删除的问题 ;

1.渲染列表有input输入框,在不同的输入框内写值,在进行删除操作时,输入框内的值不是想要的结果图片描述

我删除第二项的时候,我需要的结果是 第一个输入框内为1,最后一个输入框为3

clipboard.png


<!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>
阅读 5.1k
1 个回答

在你的例子中,数据是保存在 arr 中的,所以,你的代码稍稍改下:

this.items.splice(index,1); 下添加一行:

this.arr.splice(index,1);

就可以达到你要的效果。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题