vue使用element中的input组件实现传多个值和input回显强制刷新

        在项目开发过程使用input遇到的小问题,直接从element拿取过来的input组件是没问题的,但是存在着如果给input的value设置默认值,再次进行操作的时候就会获取不到value回显,无用你怎么用$set()都无济于事,后来经过查询 vue中的$forceUpdate可以强制更新表单,使用了果真奏效。

       顺带引出一下input的@input或@change事件如何传递多个值进行相关操作,一般情况我们@input和@change都是能直接获取value的值的,我试了$event,也是过网上的其他方法,@input="((val)=>{priceChange(val, 'sphyrs')})"(可能写法有出入,但是我这边不奏效),后来我改成了@input="e=>priceChange(e,'sphyrs')"这种写法,就可以成功获取到了我想要的第二个值,如果要传第三个值道理一样在@input="e=>priceChange(e,'sphyrs','','','','','','','')"即可。下面是代码片段:

                    <el-input
                      v-model="observerData.formTable.sphyrs"
                      placeholder="网上参会人数"
                      style="width: 270px"
                      @input="e=>priceChange(e,'sphyrs')"
                    ></el-input>
 <!-- e不是固定的,这是一个自定义参数名称,你也可以改为value,看你个人写法 -->
 <!-- 这里主要是使用箭头函数往priceChange函数里传递了多一个值 -->

 

    priceChange(e, type) {
      console.log(e, type)
      if (type == 'sjhm') {
        this.observerData.formTable.sjhm = e
      } else if (type == 'sfzhm') {
        this.observerData.formTable.sfzhm = e
      } else {
        this.observerData.formTable.sphyrs = e
      }
      this.$forceUpdate() // 强制刷新表单
    },

修改前: 

 

修改后:

结果:sphyrs就是我想要的第二个值,这么一样input获取值回显问题解决,@input和@change函数传多个参数也解决

&&&&代码不多,但是真的很实用。 如果有什么不对的地方也希望大家多多吐槽,也希望帮助到正在学习vue的朋友。&&&&

 

Logo

前往低代码交流专区

更多推荐