Vue+Element-UI出現(xiàn)bug，刪除v-for列表中一項時數(shù)據(jù)對不上了

最近剛上手vue，使用vue和Element-UI做了一個簡單的多條件篩選列表，功能如下圖：

“篩選條件1”和“篩選條件2”都是組件SelectionConditionList生成的，點擊“新建任務”會增加一個“篩選條件n”。
當我增加多條“篩選條件”后，每條篩選條件都選中一個條件類型，如下圖：

此時，當我刪除“篩選條件2”時，詭異的事情發(fā)生了：

可以看到，序號確實是“篩選條件2”沒有了，但是內容“篩選條件2”的“注冊時間”仍然存在，而消失的是最后一條篩選條件“消費點位”。

從console.log的打印信息也能看出，實際是序號4的內容被刪除了。我的代碼自己查了好多遍了，看不出問題出在什么地方，我把代碼貼出來，求大神幫忙理理是哪里出錯了？

1，主文件 UserSelectionTask.vue

<template>
    <div class="content-body">
        <div class="line-title">優(yōu)惠券系統(tǒng)/添加用戶篩選任務</div>
        <el-form ref="form" :model="form" label-width="100px">
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="任務名稱">
                <el-input v-model="form.inputTaskName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="參考任務">
                <el-select v-model="form.selectRefTask" placeholder="請選擇" @change="selectRefTaskSC">
                  <el-option
                    v-for="item in refTaskOptions"
                    :label="item.label"
                    :value="item.value"
                    :key="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="驗證手機號碼"><el-input v-model="form.inputVerifyPhoneNumber"></el-input></el-form-item>
              </el-col>
              <el-col :span="12">
                <el-button plain icon="el-icon-circle-plus-outline" @click="addTaskVerifyPhone">加入</el-button><el-button plain icon="el-icon-close">刪除</el-button><el-button plain icon="el-icon-delete">清空</el-button>
              </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="20">
              <el-form-item label=" ">
                <el-input type="textarea" :rows="6" readonly v-model="form.phoneNumbersTextArea"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div>
              <v-selection-condition-list v-for="item in selectionConditionList" :key="item.id" :condition-index="item.index" :dom-show="item.show" @delete="deleteSelectionCondition"></v-selection-condition-list>
          </div>
          <div class="div_center">
            <el-button type="warning" plain>取消任務</el-button> <el-button type="primary" plain @click="addNewSelectionTask">新建任務</el-button> <el-button type="primary" plain>提交任務</el-button>
          </div>
        </el-form>
    </div>
</template>

<script>
/* eslint-disable */
import vSelectionConditionList from './SelectionConditionList'
  export default
  {
    data()
    {
      return {
        selectionConditionList:[ {index:1,show:false}],
        form: {
          inputTaskName: '',
          selectRefTask: '',
          inputVerifyPhoneNumber: '',
          phoneNumbersTextArea: ''
        },
        refTaskOptions: [
          {
          value:  '17年10月W1任務',
          label:  '17年10月W1任務'
          },
          {
          value:  '18年1月W2任務',
          label: '18年1月W2任務'
          },
          {
          value: '18年2月W3任務',
          label: '18年2月W3任務'
          }]
      }
    },
    methods: {
      // 添加驗證手機號碼
      addTaskVerifyPhone(){
      },
      // 參考條件選中值發(fā)生變化時觸發(fā)
      selectRefTaskSC(re)
      {
        // re: 目前的選中值
        this.form.inputTaskName = re;
      },
      // 添加新的用戶篩選條件
      addNewSelectionTask(){
        var len = this.selectionConditionList.length;
        this.selectionConditionList.push({index:len+1});
//        console.log(this.selectionConditionList)
      },
      // 刪除用戶篩選條件
      deleteSelectionCondition(index){
        console.log("delete..."+index);
        this.selectionConditionList.splice(index-1,1);
//        console.log(this.selectionConditionList);
        var len = this.selectionConditionList.length;
/*        for(var i=0;i<len;i++){
          this.selectionConditionList[i].index = i+1;
        }*/
      }
    },
    components:{
      vSelectionConditionList
    }
  }
</script>
<style>
  .div_center {
    text-align: center;;
    width:100%;
    margin:0 auto;
  }
</style>

2，篩選條件組件文件 SelectionConditionList.vue

<template>
  <div class="content-body">
      <el-row :gutter="10">
        <el-col :span="4">
          <div class="text select-txt">篩選條件{{ myConditionIndex }} <i class="el-icon-close" @click="deleteCondition" v-show="myDomShow"></i></div>
        </el-col>
        <el-col :span="8">
          <el-form-item label="邏輯關系" v-show="myDomShow">
            <el-select v-model="form.logicType" placeholder="請選擇" @change="logicSC" class="logic-select">
              <el-option
                v-for="item in logicTypeOptions"
                :label="item.label"
                :value="item.value"
                :key="item.value">
              </el-option>
            </el-select>
          </el-form-item>&nbsp;
        </el-col>
        <el-col :span="12">
          <el-form-item label="條件類型">
            <el-select v-model="form.conditionType" placeholder="請選擇" @change="conditionTypeSC">
              <el-option
                v-for="item in conditionTypeOptions"
                :label="item.label"
                :value="item.value"
                :key="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item label="條件類型">
          <el-input v-model="form.inputConditionName"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">

      </el-col>
    </el-row>
  </div>
</template>

<script>
/* eslint-disable */
  export default
  {
    props:{
      conditionIndex:{type:Number}, domShow:{type:Boolean,default:true},inputName:{type:String}
    },
    data()
    {
      return {
        myConditionIndex:this.conditionIndex,
        myDomShow:this.domShow,
        form: {
          conditionType:'',
          logicType:'',
          inputConditionName:''
        },
        logicTypeOptions: [{
          value: '且',
          label: '且'
        }, {
          value: '和',
          label: '和'
        }, {
          value: '排除',
          label: '排除'
        }],
        conditionTypeOptions: [{
          value: '樓宇點位',
          label: '樓宇點位'
        }, {
          value: '注冊時間',
          label: '注冊時間'
        }, {
          value: '最近消費商品',
          label: '最近消費商品'
        }, {
          value: '消費點位',
          label: '消費點位'
        }, {
          value: '付費時間',
          label: '付費時間'
        }, {
          value: '消費城市',
          label: '消費城市'
        }, {
          value: '企業(yè)導入',
          label: '企業(yè)導入'
        }, {
          value: '已有任務',
          label: '已有任務'
        }, {
          value: '杯均價',
          label: '杯均價'
        }, {
          value: '消費頻次',
          label: '消費頻次'
        }, {
          value: '導入用戶',
          label: '導入用戶'
        }]
      }
    },
    destroyed()
    {
      console.log("name.."+this.form.inputConditionName+"..id.."+this.conditionIndex);
    },
    methods: {
      // 選擇篩選條件
      conditionTypeSC(re)
      {
        // re: 目前的選中值
        this.form.inputConditionName = re;
        console.log("name.."+this.form.inputConditionName+"..id.."+this.conditionIndex);
      },
      // 選擇邏輯關系
      logicSC(re){

      },
      // 刪除此篩選條件
      deleteCondition(){
        this.$emit('delete',this.myConditionIndex);
      }
    },
    watch:{
      conditionIndex(val){
        this.myConditionIndex = val;
      },
      domShow(val){
        this.myDomShow = val;
      }
    }
  }
</script>
<style>
  .logic-select {
    width:100px;
  }
</style>

全部文件網(wǎng)盤下載鏈接: https://pan.baidu.com/s/1mjM7Jjq 密碼: yspj