element ui el-time-picker的动态生成多个时间控件，获取值的问题

Question

现在遇到个这样的需求，下面是源码

<template>
  <div id="app">
    <el-time-picker v-model="value1" :picker-options="{
      selectableRange: '00:00:00 - 23:59:59'
    }" placeholder="任意时间点" @change="change" value-format="HH:mm:ss">
    </el-time-picker>
    <el-button @click="click">+</el-button>
    <div v-for="(item,index) in timeData" :key="index">
      {{item.time}}
      <el-time-picker v-model="item.time" :picker-options="{
      selectableRange: '00:00:00 - 23:59:59'
    }" placeholder="任意时间点" @change="change1" value-format="HH:mm:ss">
      </el-time-picker>
      <el-button @click="delete1(index)">-</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'App',
    components: {},
    data () {
      return {
        value1: "",
        timeData: [],
        allTime: [],
        value: "",
        time: "",
      }
    },
    methods: {
      change (val) {

        this.value1 = val;
        console.log(this.value1)
      },
      change1 (value) {
        console.log(value)
        this.allTime.push(value)
        console.log(this.allTime, 'this.add')
      },
      click () {
        this.timeData.push({ time: '' })
      },
      delete1 (index) {
        console.log(index)
        this.timeData.splice(index, 1);
        this.allTime.splice(index, 1)
        console.log(this.allTime, 'this.del')
      }
    },
  }
</script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

初始的时候只有一个时间选择器，然后我点击有右边的加号，可以增加一个事件选择器，这样可以动态增加多个!
需求就是获取这所有时间选择器的时间，然后传到后台

已经实现的功能:
1.动态新增时间选择器和删除当前时间选择器,拿到对应的事件数据
暂时无法实现的是:
1.按我现在的代码，是只能新增时间空间，然后选择好，拿到选好的时间
问题在于万一我要修改其中一个控件的时间数据，而不是删除，就乱了，被修改的控件之前的数据也在数组里，修改后的数据也在数组了，怎么判断是当前的时间空间被修改了，替换之前的旧数据

Answer 1

  change1() {
               console.log(this.timeData);
            },

这个timeData已经就是符合你的需求的data了