vue动态添加空白input元素，数据绑定和删除

Question

最少填一行，html里第一行是固定的，之后的行是包裹在一个v-for循环里的，点添加的时候，往要循环的数组stepNum里加内容，删除的时候传入循环时的索引index。但现在不知道如何绑定v-model，而且当点击箭头处删除时，无法删除当前行，该处input里的数据还在。

methods:{

        add:function () {

            this.stepNum.push('');

        },

        del:function (index) {

            this.stepNum.splice(index,1)

        }

    }

Answer 1

<tr v-for="(data,index) in datas" :key="index">&nbsp; &nbsp; <td><input v-model="datas[index].userNumber"></td>&nbsp; &nbsp; <td><span @click="del(index)">删除</span></td></tr>data(){&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; datas:[{name:1234,userNumber:1,id:1},{name:4567,userNumber:2}],&nbsp; &nbsp; }},methods:{&nbsp; &nbsp; del(index){&nbsp; &nbsp; &nbsp; &nbsp; this.datas[index].userNumber = 0;&nbsp; &nbsp; }}如果原始data里面没有userNumber这个字段，那就手动给每一个加上吧。（我一般会叫后端改接口，返回个默认值

Answer 2

一楼给出了动态条目增减的样例，主要是data中维护一个数据的源数组用于循环渲染。但是在绑定key为列表中的index话，删除时组件销毁可能会出现问题。这源于Vue内部的组件销毁机制，因此key尽量绑定为一个uniqueId。