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">

    <td><input v-model="datas[index].userNumber"></td>

    <td><span @click="del(index)">删除</span></td>

</tr>

data(){

    return {

        datas:[{name:1234,userNumber:1,id:1},{name:4567,userNumber:2}],

    }

},

methods:{

    del(index){

        this.datas[index].userNumber = 0;

    }

}

如果原始data里面没有userNumber这个字段，那就手动给每一个加上吧。（我一般会叫后端改接口，返回个默认值

Answer 2

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