前端實戰項目積累小知識（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的朋友。&&&&