Vue动态添加input时v-modle“陷阱”

2020-04-09  本文已影响0人  imdongliang

在一个项目中,有个功能需要动态添加input,灵光一闪,我就进行了以下操作:

代码实现

<template>
<!--旅客-->
        <div
          class="panel is-shadow people-info-box traveler-item"
          v-for="(item, index) in travelerList"
          :key="index"
        >
          <div class="panel-header">
            <i class="iconfont icon-wode"></i>
            旅客{{index+1}}
          </div>
          <div class="panel-body">
            <el-form-item label="中文姓" >
              <el-input v-model="item.ch_surname" type="text"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="中文名" >
              <el-input v-model="item.ch_name" type="text" autocomplete="off"></el-input>
            </el-form-item>
          </div>
        </div>
        <!--旅客-->
</template>
<script>
 export default {
   data () {
      return {
        travelerList: [],
        travelerItem: {
          ch_surname: null,
          ch_name: null,
          surname: null,
          name: null,
          sex: null,
          birthday: null,
          country_id: null,
          passport_number: null,
          passport_end_time: null,
          weight: null,
          shoe_size: null,
          height: null,
          cellphone: null
        },
    }
}
methods: {
 handleChangeTravelerNum (newVal, oldVal) {
        if (newVal > oldVal) {
        //  加1
          this.travelerList.push(this.travelerItem)
        } else {
          this.travelerList.splice(this.travelerList.length -1, 1)
        }
      },
}
}
</script>

代码思路:

避免麻烦,在data下新建一个有初始值的travelerItem,在数量增加的时候,就将这个对象push到travelerList里,如果数量减的时候就从travelerList后面开始移除,这完成了旅客数量增减操作。v-for中的item是travelerList子项,那我input元素就用 v-model 来绑定值,值用item.xxx就搞定啦

以下是实现效果:

Animation.gif
完美,增减旅客数量没什么问题,整个功能完成!!
开什么玩笑,如果就这样我还写这篇东西???

再往下看:

Animation.gif
我x,坑爹啊!!!在旅客1里输入数据的时候,旅客2中竟然同时出现了相同的内容!!!这还得了

思索了一会,进行了这样改动(看data和methods中的注释)

<template>
<!--旅客-->
        <div
          class="panel is-shadow people-info-box traveler-item"
          v-for="(item, index) in travelerList"
          :key="index"
        >
          <div class="panel-header">
            <i class="iconfont icon-wode"></i>
            旅客{{index+1}}
          </div>
          <div class="panel-body">
            <el-form-item label="中文姓" >
              <el-input v-model="item.ch_surname" type="text"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="中文名" >
              <el-input v-model="item.ch_name" type="text" autocomplete="off"></el-input>
            </el-form-item>
          </div>
        </div>
        <!--旅客-->
</template>
<script>
 export default {
   data () {
      return {
        travelerList: []
//这里的travelerItem没了
    }
}
methods: {
 handleChangeTravelerNum (newVal, oldVal) {
    // travelerItem 到这里啦
    const travelerItem = {
          ch_surname: null,
          ch_name: null,
          surname: null,
          name: null,
          sex: null,
          birthday: null,
          country_id: null,
          passport_number: null,
          passport_end_time: null,
          weight: null,
          shoe_size: null,
          height: null,
          cellphone: null
        }
      if (newVal > oldVal) {
        //  加1
          this.travelerList.push(travelerItem)
        } else {
          this.travelerList.splice(this.travelerList.length -1, 1)
        }
      },
  }
}
</script>

再看看效果:

Animation.gif

完美

上一篇下一篇

猜你喜欢

热点阅读