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

v-model绑定到v-for循环的项上：

<template>
    <ul>
        <li v-for="(item, index) in formData" :key="index">
            <input ... v-model="item.num" />人
            <input ... v-model="item.money" />元
            ...
            <span @click="add">+<span>
            <span @click="del(index)">-<span>
        </li>
    </ul>
</template>
...
data() =>({
    formData: [{ num: '', money: ''}]
}),

methods: {
    add() {
        this.formData.push({ num: '', money: ''})
    },
    del(index) {
        this.formData.splice(index, 1)
    }
}

Answer 2

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

建一个空数组 arr:[],
然后绑定 v-model="arr[index]"