VueJS数据绑定相关

Question

我使用vueJS来显示表数据，当我单击删除按钮时，表总是删除最后一行，而不是特定的行。我使用我的自定义UIComponent'lovTable'，它将输入元素更改为另一种样式，如何避免它，并使数据和页面以相同的方式改变。这是代码.Tks。

<script>
    //服务类型下拉列表数据转化
    var mServiceTypeData = $.map(serviceTypeData, function (obj) {
        obj.id = obj.value;
        obj.text = obj.meaning;
        return obj;
    });
    $(function(){
        var vm = new Vue({
            el: '#div-rms-memo',
            data: {
                sub:[]
            },
            methods:{
                //添加子项目
                addSubProject:function () {
                    vm.sub.push({
                        subPrjServeType:'',
                        subPrjBelongToDept:'',
                    });
                },
                //移除当前行的子项目
                removeCurrentRow:function(index){
                    var $del=vm.sub.splice(index,1);
                },
            }
        });
        function renderLines(el, lineIndex){
            //渲染select2
            $("#subPro"+lineIndex).find(".subPrjServeType").select2Ext({
                placeholder: '请选择服务类型',
                data: mServiceTypeData,
                width:150
            }).on('change', function () {
                vm.sub[lineIndex].subPrjServeType = $(this).val();
            });
            //归属部门LOV
            $("#subPro"+lineIndex).find(".subPrjBelongToDept").lovTable({
                title:'归属部门',
                placeholder:'请选择',
                valueField:'unitId',
                textField:'unitName',
                query:[
                    {
                        text:'部门ID',
                        name:'unitId'
                    },
                    {
                        text:'部门名称',
                        name:'unitName'
                    }
                ],
                rowSelected:function(row){
                    vm.sub[lineIndex].subPrjBelongToDept=row.unitId;
                },
                textClear:function(){
                    vm.sub[lineIndex].subPrjBelongToDept = "";
                }
            },{
                url : '${base.contextPath}/project/prjBranchView/queryConditionPage?'+_header+'='+_token,
                columns: [{
                    title:'部门ID',
                    field:'unitId'
                },{
                    title:'部门名称',
                    field:'unitName'
                }]
            });
        }
        Vue.directive('line-bind', {
            bind: function (el, binding) {
                var lineIndex = binding.value;
                console.info('binding index='+lineIndex)
                vm.$nextTick(function () {
                    renderLines(el,lineIndex);
                })
            },
            unbind:function(el,binding){
                vm.$nextTick(function () {
                    for(var i=0;i<vm.sub.length;i++){
                        renderLines(vm.sub[i],i);
                    }
                })
            }
        });
    })
</script>
<div class="content-wrapper">
    <section class="content">
        <div id="div-rms-memo" >
                <div class="box box-blue">
                    <div class="form-group">
                        <a href="javascript:void(0)" class="btn btn-crm" v-on:click="addSubProject">
                            <span class="glyphicon glyphicon-plus">添加</span>
                        </a>
                    </div>
                    <table align="center" class="table table-bordered" v-line-bind="index" v-for="(el,index) in sub" :id="'subPro'+index" :cindex="index">
                        <tr class="crm-title">
                            <td align="center" valign="middle" rowspan="2" style="width:5%;">
                                <a href="javascript:void(0)" class="btn btn-default btn-xs removeSubPrj" id="removeSubPrjBtn" v-on:click="removeCurrentRow(index)">
                                    <span class="glyphicon glyphicon-minus"></span>
                                </a>
                            </td>
                            <td align="center" style="width:15%;"class="required">服务类型</td>
                            <td align="center" style="width:15%;"class="required">归属部门</td>
                            <td align="center" style="width:15%;" class="required">人天</td>
                        </tr>
                        <tr>
                            <td align="center">
                                <input  type="text" id="subPrjServeType" v-model="el.subPrjServeType" class="form-control input-sm subPrjServeType"/>
                            </td>
                            <td align="center">
                                <input type="text"   class="form-control input-sm subPrjBelongToDept"  v-model="el.subPrjBelongToDept">
                            </td>
                            <td align="center">
                                <input type="number"   class="form-control input-sm subPrjPeoplePerDay"  v-model="el.subPrjPeoplePerDay">
                            </td>
                        </tr>
                    </table>
                </div>
        </div>
    </section>
</div>