<template>
  <div>
    <div @click="add" style="margin-top:30px">新增</div>
    <div v-for="(name, index) in form" :key="index">
      <input v-model="name.text" type="text">
      <div class="delete" @click="deleteItem(index)">删除</div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  data() {
    return {
      form: [
        { text: '111', type: 'sdfas' },
        { text: '222', type: 'sdfas' },
        { text: '333', type: 'sdfas' },
        { text: '444', type: 'sdfas' }
      ]
    }
  },
  methods: {
    add() {
      console.log('add')
      this.form.push({ text: this.form.length, type: 'sdfas' })
    },
    deleteItem(index) {
      this.form.splice(index, 1)
      console.log(index)
    }
  },
  beforeRouteLeave(to, from, next) {
    this.$destroy()
    next()
  }
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
</style>