前端实战项目积累小知识（11）：vue使用element中的input组件实现传多个值和input回显强制刷新

 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的朋友。&&&&